【问题标题】:Is there a way to change screen from an ListView Item?有没有办法从 ListView 项目更改屏幕?
【发布时间】:2020-08-01 22:28:48
【问题描述】:

我必须制作一个颤动的应用程序,其中我的 HomeScreen 页面填充了一个 ListView(这个小部件填充了来自 firebase 数据库的数据),我已经完成了,但现在我必须制作一个 onPressed 事件。我已经用 InkWell 做到了这一点,但现在我不知道如何让每个项目执行不同的功能。

这是我的代码:

//主屏幕

    class MyHomePage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
    List<Function> itemFunctions = [
      () {
      print("1");
      Navigator.pop(context, MaterialPageRoute(builder: (context) => Antique()));},
          () {Navigator.pop(context, MaterialPageRoute(builder: (context) => Mediterana()));},
      () {Navigator.pop(context, MaterialPageRoute(builder: (context) => SuperKebab()));},

    ];
    return new Scaffold(
      backgroundColor: Colors.white,
      appBar: new AppBar(
        title: new Text("e-Radauti Restaurante"),
      ),
      body: Container(
          child: StreamBuilder(
              stream: _firebaseRef.onValue,
              builder: (context, snap) {
                if (snap.hasData &&
                    !snap.hasError &&
                    snap.data.snapshot.value != null) {
                  Map data = snap.data.snapshot.value;
                  List item = [];
                  data.forEach(
                      (index, data) => item.add({"key": index, ...data}));
                  return ListView.builder(
                    itemCount: item.length,
                    itemBuilder: (context, index) {
                      return Card(
                        child: Container(
                          child: InkWell(
                            child: MediaQuery.removePadding(context: context,removeTop: true,removeBottom: true, child: Row(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                mainAxisAlignment: MainAxisAlignment.start,
                              children: [
                                Container(
                                width: 100,
                                  child: CachedNetworkImage(
                                    placeholder: (context, url) =>
                                        CircularProgressIndicator(),
                                    imageUrl:
                                    item[index]["photoUrl"].toString(),
                                    errorWidget: (context, url, error) =>
                                        Icon(Icons.error),
                                  ),
                              ),
                                Column(
                                  children: <Widget>[
                                    Text(item[index]["name"]),
                                    Text(item[index]["description"]),
                                  ],
                                )
                              ]
                            ),),
                        
                          onTap: () {itemFunctions[index]; print("Clicked item nr $index");}
                          ),
                        ),
                      );
                    },
                  );
                }
                return CircularProgressIndicator();
              })
          ),
    );
  }
}

编辑:这是我要更改的屏幕之一

    class SuperKebab extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Meniu Super Kebab"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Revin!'),
        ),
      ),
    );
  }
}

编辑:似乎我对项目的点击有效,但 &lt;code&gt;List &lt; Function &gt;... &lt;/code&gt; 中的函数没有被调用。

这是我的日志输出

这是我的 firebase 数据库结构:

所以基本上我的第一个是古董,第二个是 Mediterana,最后一个是 SuperKebab

当我单击第一个项目(古董)时,我希望导航到古董屏幕,当我单击第二个项目时,我希望它导航到 Mediterana 屏幕,依此类推。

我认为一种方法是创建一个函数并根据具体情况使用来自 firebase 存储的数据填充该函数。

【问题讨论】:

  • Listview 中最多可以有多少项?
  • @user 我想不会超过 20-30

标签: listview flutter listviewitem


【解决方案1】:

您可以手动或以编程方式将您的函数定义到一个列表中,然后您可以像这样使用来自ListView.builder 的索引调用该列表

List<Function> itemfunctions = [
        (){print('Button Pressed!');},   
        (){Navigator.of(context).pop()},
        (){Navigator.popAndPushNamed(context, NewScreen.routeName)},
    ];
//Where you initialize this depends on whether you need context or not

  ListView.builder(
            shrinkWrap: true,
            itemCount: numbers.length,
            itemBuilder: (context, index) => Column(
              children: <Widget>[
                Text(
                  numbers[index].toString(),
                ),
                RaisedButton(
                  child: Text('$index number'),
                  onPressed: itemfunctions[index],
                )
              ],
            ),
          )

【讨论】:

  • 没用。我单击这些项目,但没有任何反应。我会更新我的代码,如果您愿意帮助我,请这样做
  • 那是因为你试图从函数内部调用函数
  • 我还需要上下文...我应该把函数放在哪里?
  • 我更改了我的代码以反映您需要进行的更改,如果您想将该打印语句保留在onTap 中,您需要摆脱列表中的(){},您不能拥有@987654325 @ 在 onTap 和 List
  • 如果您需要上下文,请将其放在构建函数顶部的正确位置
猜你喜欢
  • 2012-02-20
  • 1970-01-01
  • 2018-01-07
  • 2015-08-22
  • 1970-01-01
  • 1970-01-01
  • 2020-03-09
  • 2020-07-10
  • 2011-10-03
相关资源
最近更新 更多