时间戳

首页 > 解决方案 > 我想在 Flutter 的类模型中将 Screen_Name 作为属性传递

flutter - 我想在 Flutter 的类模型中将 Screen_Name 作为属性传递

问题描述

实际上我有一张卡片，上面有标题和图片，可以导航到特定的路线。我想将屏幕名称作为类模型中的属性传递。但是当我单击时没有任何反应，并且此消息出现在控制台中：

'package:flutter/src/widgets/navigator.dart'：断言失败：第 4135 行 pos 12：'name != null'：不正确。

这是类模型：

class ZekrModel {
  final String zekrTitle;
  final String zekrImage;
  final String zekrPage;
  ZekrModel({this.zekrTitle, this.zekrImage, this.zekrPage});
}

这是提供者：

class ZekrProvider with ChangeNotifier{
  List<ZekrModel> _zekrList = [
    ZekrModel(
        zekrTitle: 'أذكار المساء',
        zekrImage: 'assets/images/az6.png',
        zekrPage: 'AlsabahScreen.id',
      ),
  ];

  List<ZekrModel> get zekrList {
    return _zekrList;
  }
}

这是确切代码没有响应的 UI 代码：

Consumer<ZekrProvider>(
        builder:(context, value, child) => GridView.count(
          crossAxisCount: 2,
          childAspectRatio: 0.3.sw/0.18.sh,
          //mainAxisSpacing: 8,
          //crossAxisSpacing: 6,
          children: List.generate(value.zekrList.length, (index){
            return ZekrCard(
              zekrTitle: value.zekrList[index].zekrTitle,
              zekrImage: value.zekrList[index].zekrImage,
              zekrRoute: (){Navigator.pushNamed(context, value.zekrList[index].zekrPage);},
            );
          }),
        ),
      ),

这是我的路线类：

final Map<String, WidgetBuilder> routes = {
  SplashScreen.routeName : (context) => SplashScreen(),
  AlsabahScreen.routeName : (context) => AlsabahScreen(),
};

标签： flutterfunctionclassnavigationarguments

解决方案

嘿伙计们，我使用以下步骤解决了它：

第一：将此属性添加到模型类

final MaterialPageRoute materialPageRoute;

要像这样：

class ZekrModel {
  final String zekrTitle;
  final String zekrImage;
  final MaterialPageRoute materialPageRoute;

  ZekrModel({this.zekrTitle, this.zekrImage, this.materialPageRoute});

}

第二：在Provider类中使用这个attr

materialPageRoute: MaterialPageRoute(builder: (context) => SecondScreen())

变成这样：

class ZekrProvider with ChangeNotifier{
  List<ZekrModel> _zekrList = [
    ZekrModel(
        zekrTitle: 'أذكار المساء',
        zekrImage: 'assets/images/az6.png',
        materialPageRoute: MaterialPageRoute(builder: (context) => AlmasaaScreen())
    ),
];

  List<ZekrModel> get zekrList {
    return _zekrList;
  }
}

最后在 UI 中使用它：

body: Consumer<ZekrProvider>(
        builder:(context, value, child) => GridView.count(
          crossAxisCount: 2,
          childAspectRatio: 0.3.sw/0.18.sh,
          //mainAxisSpacing: 8,
          //crossAxisSpacing: 6,
          children: List.generate(value.zekrList.length, (index){
            return ZekrCard(
              zekrTitle: value.zekrList[index].zekrTitle,
              zekrImage: value.zekrList[index].zekrImage,
              zekrRoute: () {
              Navigator.push(
                context, value.zekrList[index].materialPageRoute
              );
            },
            );
          }),
        ),
      ),

推荐阅读