Flutter 列表视图项目正在消失。

Question

我的 Listview 项目超出视图并显示在我的 Listview 下方的 ListTile 中，我没有在我的代码中做错什么。请看下面的图片，您可以看到列表视图的结束点，在另一张图片中，我的项目正在离开这个结束点。我在下面发布我的代码，请看一下并帮助我解决这个问题。

这是我的 Listview 项目正在离开视图。 下面是代码：

 class _CartFinalSummaryState extends State<CartFinalSummary> {


  final cartSummary = new StoreConnector<List<CartItem>, List<CartItem>>(
  converter: (store) => store.state,
  builder: (context, list) => new Padding(
  padding: const EdgeInsets.all(8.0),
    child: new Container(
      margin: new EdgeInsets.only(top: 5.0, left: 5.0, right: 5.0),
      child: new Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
        new Text(
          "Quantity: (${getTotalQuantity(list)})",
          style: new TextStyle(
              fontSize: 15.0,
              fontWeight: FontWeight.w700
          ),
        ),

        ],
      ),
     ),

    ),);


   final listCartItem = new StoreConnector<List<CartItem>, 
   List<CartItem>>(
   converter: (store) => store.state,
   builder: (context, list) => new Container(
    child: new Flexible(
      child: new Stack(
        children: <Widget>[
          new ListView.builder(
              scrollDirection: Axis.vertical,
              itemCount: list ==0 ? null : list.length,
              itemBuilder: (context, index){

                return new Column(
                  children: <Widget>[
                    new ListTile(

                      title: new Text(
                          list[index].product
                              .name.toString(),
                        style: new TextStyle(fontWeight: FontWeight.bold,
                            fontSize: 18.0),),

                      subtitle: new Text(list[index].quantity.toString()
                          + " x " + list[index].product.price.toString()),
                      trailing: new Text("€"+(list[index].product.price *
                          list[index].quantity).toString(),
                          style: new TextStyle(fontWeight: FontWeight.bold,
                              fontSize: 18.0)),
                    ),
                    new Divider(

                    )
                  ],
                );
              }),
        ],
      ),
    ),

  ));
    @override
   Widget build(BuildContext context) {
   return new Scaffold(
   bottomNavigationBar: new GestureDetector(
    onTap: () {
      /*Navigator.push(
          context,
          new MaterialPageRoute(builder: (context) =>
          new SelectTable()));*/
      },
       child:new StoreConnector<List<CartItem>, List<CartItem>>(
         converter: (store) => store.state,
         builder: (context, list) =>  new Container(
         padding: const EdgeInsets.all(10.0),
         color: Colors.green,
         child: new Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new GestureDetector(

              child: new Text("Proceed to Pay ${
                  "( €"+getTotal(list).toStringAsFixed(2)+" )"}", style:
              new TextStyle(
                  color: Colors.white,
                  fontSize: 18.0),),
            )

          ],
        )
    )),
  ),
  appBar: new AppBar(
    iconTheme: new IconThemeData(color: Colors.white),
    title: new Text('Cart Summary', style: new TextStyle(
      color: Colors.white
    ),),
  ),
  body: new Container(
    child: new Column(
      children: <Widget>[
        cartSummary,
        new Divider(
          color: Colors.black,
          height: 3.0,

        ),
        listCartItem,
       new Divider(
         color: Colors.black,
         height: 5.0,
       ),
       new ListTile(
         title: new Text("Table Selected",
             style: new TextStyle(fontWeight: FontWeight.bold,
                 fontSize: 18.0)),
         trailing: new Text("5",
             style: new TextStyle(fontWeight: FontWeight.bold,
                 fontSize: 18.0)),
       ),
        new Divider(
          color: Colors.black,
        ),
        new ListTile(
         title: new Text("Sub Total",
             style: new TextStyle(fontWeight: FontWeight.bold,
                 fontSize: 18.0)),
         trailing: new Text("5",
             style: new TextStyle(fontWeight: FontWeight.bold,
                 fontSize: 18.0)),
          ),
         ],
       ),
     ),
  );
 }
}

Answer 1

我已经通过替换这段代码解决了这个问题。我仍然不确定是什么问题，我认为我使用的 ListTiles 是透明的，我使用 ListTile 作为 Container 小部件的子项并设置容器的背景颜色。

   new Divider(
         color: Colors.black,
         height: 0.1,
       ),
       new Container(
         color: const Color(0xFFD6D6D6),
         child: new ListTileTheme(


           child: new ListTile(

             onTap: (){
               Navigator.pushReplacement(
                   context,
                   new MaterialPageRoute(builder: (context) =>
                   new SelectTable()));
             },
             title: new Text("Table Selected",
                 style: new TextStyle(fontWeight: FontWeight.bold,
                     fontSize: 17.0)),
             trailing: new Text(widget.tableNumber.toString(),
                 style: new TextStyle(fontWeight: FontWeight.bold,
                     fontSize: 17.0)),
           ),
         ),
       ),
        new Divider(
          height: 0.1,
          color: Colors.black,
        ),
        new Container(
          color: const Color(0xFFD6D6D6),
          child: new ListTile(
           title: new Text("Grand Total",
               style: new TextStyle(fontWeight: FontWeight.bold,
                   fontSize: 17.0)),
           trailing: new Text("€"+getTotal(list).toString(),
               style: new TextStyle(fontWeight: FontWeight.bold,
                   fontSize: 17.0)),
       ),
        ),

Answer 2

对于遇到此问题的任何人，您可以将您的

ListTile

包裹在

Card

小部件中以防止它。

Card(child: ListTile(....))