时间戳

首页 > 解决方案 > 仅使用 onTap 功能抖动不同的屏幕导航

flutter - 仅使用 onTap 功能抖动不同的屏幕导航

问题描述

当我处理颤动的数据列表时，如何导航到不同的路线，在我的情况下，所有卡片都会将我导航到相同的路线。
面对这个问题的相关代码，

Column(
  children: levelData.map((value) { 
    return Container( 
      margin: EdgeInsets.symmetric(vertical: 10.0), 
      decoration: BoxDecoration( 
        borderRadius: BorderRadius.circular(13.0),
        border: Border.all( color: AppColors().containerBorder)
      ),
      child: AppListTile(
        contentPadding: EdgeInsets.all(15.0),
        onTap: () {
         
        }, 
        title: Text(
          value['name'], 
          style: TextStyle(
            fontSize: displayWidth(context) * 0.045,
            color: AppColors().black
          ),
        ),
        subtitle: Text(
          value['description'],
          style: TextStyle(
            color: AppColors().black,
            fontSize: displayWidth(context) * 0.035
          ),
        ),
        trailing: Icon(
          Icons.arrow_forward_outlined,
          size: displayWidth(context) * 0.08,
          color: AppColors().orange,
        ),
      ),
    );
  }).toList(),
),

标签： flutterdartprovider

解决方案

Flutter 的一个好处是可以将函数存储为变量，而变量可以存储为数组。因此，您可以创建一个数组并将您希望您的图块执行的功能存储在该数组中，每个索引应该代表您现在构建的列表图块的索引。这是一个示例数组

var functionsArray = [
    (){print("hello");}, 
    (){print("hello");}, 
];

您可以编辑代码以适合此表单，如下所示：

   List<Widget> getData(levelData){
      List<AppListTile> data = []
      for(int i=0;i < levelData.length; i++){
         var tileData = levelData[i];
         Function myFunction = functionsArray[i];
         tile = AppListTile(onTap: myFunction);
         data.add(tile);
      }
      return data;
    }

推荐阅读