Flutter之教你制作一个选择吃啥APP（二）

本文已参与「新人创作礼」活动，一起开启掘金创作之路

书接上文 我们已经实现了一个填写菜名的弹出框 接下来我们就实现把菜名添加进菜单里

而菜单 我们应该咋实现呢

我的想法是搞一个listview 因为饭店里的菜单都是一行一行的吧 那我们直接用listview自动循环生成一个菜单就好了 而这我们应该怎么干的

首先 我们先在上文的弹出框的按钮里加一个点击事件 来告诉这个listview 我要加一个新菜名到菜单里咯

我们先定义一个 listTitle来生成菜单 和一个foodList来存储菜名

List<Widget> listTitle = [];
List<String> foodList = [];

然后我们在点击事件里把菜名加到foodList里 对上文的代码做一点小修改

actions: <Widget>[
  new FlatButton(
    child: new Text('确定'),
    onPressed: () {
      Navigator.pop(context);
      if (_textEditingController.text.trim() == "") {
        ToastHelper.error("吃空气？？？？");
        return;
      }
      foodList.add(_textEditingController.text);
      _textEditingController.text = "";
    },
  ),
],

而我们怎么通过foodList生成一个菜单列表呢 代码如下

listTitle.add(
    Container(

      height: 500,
      child: ListView.builder(
          itemCount: foodList.length,

          itemBuilder: (BuildContext context, int poistion) {
            return GestureDetector(
                child: Container(
                 margin: EdgeInsets.all(4.0),
                  height: 50,
                  child: rich(poistion)
                ),

                //item 点击事件
                onTap: () {
                  print("点击到第" + poistion.toString());
                  setState(() {
                  });
                },
                //item 长按事件
                onLongPress: () {
                  setState(() {
                    /**/
                    showDialog<Null>(
                        context: context,
                        barrierDismissible: false,
                        builder: (BuildContext context) {
                          return AlertDialog(
                            title: const Text('你确定删除这个菜单'),
                            content:
                            StatefulBuilder(builder: (context,
                                StateSetter setState) {
                              return Row(
                                children: [
                                  Expanded(
                                    child: Text(
                                        "你确定？"
                                    ),
                                  )
                                ],
                              );
                            }),
                            actions: <Widget>[
                              FlatButton(
                                child: new Text('确定'),
                                onPressed: () {
                                  setState(() {
                                    Navigator.pop(context);
                                    setState(() {
                                      foodList.removeAt(poistion);
                                      initData();
                                    });
                                  });
                                },
                              ),
                            ],

                          );
                        });


                    /* */
                  });
                  print("长按" + poistion.toString());
                }
            );
          }),
    )

);

Widget rich(int position) {
  return Container(
    decoration: BoxDecoration(
        border: Border.all(
            color: Theme
                .of(context)
                .primaryColor, width: 2),
        borderRadius: BorderRadius.circular((5.0))),
    child: Text.rich(TextSpan(
      children: [

        WidgetSpan(child: Padding(
          padding: const EdgeInsets.only( left: 10.0),
          child: Icon(Icons.favorite, color: Colors.red,),
        )),

        TextSpan(text: "    菜名:   ",
            style: TextStyle(
                fontSize: 20,
                color: Colors.black54
            )
        ),

        TextSpan(text: foodList.elementAt(position),
            style: TextStyle(
                fontSize: 20,
                color: Colors.black
            )
        )
      ],

    )),
  );}

首先我们用ListView.builder这个方法来自动生成列表 而这个方法有几个属性是我们要注意的

1.itemCount: foodList.length, 生成多少行列表

2.itemBuilder: (BuildContext context, int poistion) {} 这里的int poistion非常重要 这是每一行列表的索引 我们可以根据这个来找到列表里面对应的数据

然后我们就开始对列表里面的内容进行一个设计和生成列表了 并且我们应该对列表设计一个点击手势事件 GestureDetector 来对菜单里的菜名进行一个删除 而删除之后 再重新生成一个新的菜单列表 而如果要对界面里的东西进行刷新的 必须要用在setState(){}方法里面

而生成了列表 怎么显示呢 我们应该在body里调用这个已经生成了列表并存放了wideg的list的方法

Widget glueDischargeFurnaceResult(List<Widget> listTitle) {
  return Expanded(
    flex: 1,
    child: Container(
      padding: const EdgeInsets.only(
          top: 20.0, bottom: 20.0, left: 10.0, right: 10.0),
      decoration: BoxDecoration(
          border:
          Border.all(color: Theme
              .of(context)
              .primaryColor, width: 10),
          borderRadius: BorderRadius.circular((5.0))),
      child: ListView(
        shrinkWrap: true,
        children:
        listTitle,
      ),
    ),
  );
}