Flutter Listview项目不在视野内。

时间:2018-07-06 13:51:49

标签: dart flutter flutter-layout

我的Listview项不在视图中,并显示在Listview下方的ListTile中,我的代码没有出现错误。请看下面的图片,您可以看到列表视图的终点,而在另一张图片中,我的商品超出了该终点。我将代码发布在下面,请看一下并帮助我解决此问题。

See Boundry of My Listview

enter image description here

这是我的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)),
          ),
         ],
       ),
     ),
  );
 }
}

1 个答案:

答案 0 :(得分:0)

我已通过替换这段代码解决了该问题。我仍然不确定是什么问题,我认为我使用的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)),
       ),
        ),