Question

我正在尝试动态构建列表视图。我只需要在每行中显示3个列表项。但我收到以下错误：

“一个RenderFlex在底部溢出了807个像素。溢出的RenderFlex的方向为Axis.vertical。正在渲染的RenderFlex的边缘在呈现中用黄色和黑色条纹的图案。这通常是由于内容对于RenderFlex而言太大。”

也尝试通过实施Expanded，Flex来实现，但不能。

这是我正在尝试的代码

    class ItemsList extends StatefulWidget{
      @override
      State createState() => _ItemsListState();
     }

class _ItemsListState extends State<ItemsList> {

  String totalprice, itemCount, quantity;
  var itemcount = 0;

  // final List<Map<String, dynamic>> items;

  final List items = [
    {
      'title' : 'Appam',
      'imageUrl' : 'images/Appam.png',
      'itemprice' : 50,
      'itemcount' : 0,
    },
    {
      'title' : 'Bonda',
      'imageUrl' : 'images/Bonda.png',
      'itemprice' : 25,
      'itemcount' : 0,
    },
    {
      'title' : 'Dosa',
      'imageUrl' : 'images/Dosa.png',
      'itemprice' : 40,
      'itemcount' : 0,
    },
    {
      'title' : 'Idly',
      'imageUrl' : 'images/Idly.png',
      'itemprice' : 30,
      'itemcount' : 0,
    },
    {
      'title' : 'Onion Dosa',
      'imageUrl' : 'images/Onion_Dosa.png',
      'itemprice' : 50,
      'itemcount' : 0,
    },
     {
      'title' : 'Parotta',
      'imageUrl' : 'images/Parotta.png',
      'itemprice' : 50,
      'itemcount' : 0,
    },
    {
      'title' : 'Puri',
      'imageUrl' : 'images/Puri.png',
      'itemprice' : 40,
      'itemcount' : 0,
    },
    {
      'title' : 'Upma',
      'imageUrl' : 'images/Upma.png',
      'itemprice' : 30,
      'itemcount' : 0,
    },
    {
      'title' : 'Uttapam',
      'imageUrl' : 'images/uttapam.png',
      'itemprice' : 40,
      'itemcount' : 0,
    },
    {
      'title' : 'Vada',
      'imageUrl' : 'images/vada.png',
      'itemprice' : 30,
      'itemcount' : 0,
    },
  ];

  Widget _buildItemsList() {
    Widget itemCards;
    List items = this.items;
    if (items.length > 0) {
      itemCards =  GridView.count(
        shrinkWrap: true,
        scrollDirection: Axis.vertical,
        crossAxisCount: 3,
        children: List.generate(items.length, (index){
          return GestureDetector(
            child: Card(
              margin: const EdgeInsets.all(5.0),
              child: Container(
                  // width: 100.0,
                  // height: 110.0,
                  padding: const EdgeInsets.all(5.0),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Image(
                        image: AssetImage(items[index]['imageUrl']),
                        height: 80.0,
                        width: 80.0,
                      ),
                      Text(items[index]['title'])
                    ],
                  ),
                ),
            ),
            onTap: _updateCart,
          );
        }),
      );
    } 
    else {
      itemCards = Container(
        child: Text('No items'),
      );
    }
    return itemCards;
  }

  Widget _buildOrderListBar(){
    return Container(
      color: Color.fromRGBO(37, 134, 16, 1.0),
      padding: const EdgeInsets.symmetric(horizontal: 15.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Text(itemcount>0?itemcount.toString(): '', 
            style: TextStyle(color: Colors.white),),
          FlatButton(
            child: Text('Checkout', 
              style: TextStyle(
                color: Colors.white,
                fontSize: 20.0),
              ),
            onPressed: (){
              var route = MaterialPageRoute(
                builder: (BuildContext context) => OrderDetails()
              );
              Navigator.push(context, route);
            },
          ),
          Text('Rs. $totalprice', style: TextStyle(color: Colors.white),),
        ],
      ),
    );
  }

  Widget _buildSearchItem() {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 5.0),
      margin: const EdgeInsets.all(10.0),
      child: TextFormField(
        decoration: InputDecoration(
          hintText: 'Search for Item',
          icon: Icon(Icons.search)
        ),
      ),
    );
  }


  @override
  void initState(){
    super.initState();

  }

  _updateCart(){
    setState(() {
      itemcount = ++itemcount;
      totalprice = (30 * itemcount).toString();
      print(totalprice);
      print(itemcount);
    });
  }

  @override
  Widget build(BuildContext context){
    return Scaffold(
      drawer: DrawerItems(),
      appBar: AppBar(
        title: Text('Ordering'),
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            _buildOrderListBar(),
            _buildSearchItem(),
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 5.0),
              child: _buildItemsList(),
            ),
          ],
        ),
      ),
      bottomNavigationBar: BottomNavigatorItems(),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add_shopping_cart),
        onPressed: (){},
      ),
    );
  }
}

enter image description here

Answer 1

更新脚手架主体：

body: Column(
        children: <Widget>[
          _buildOrderListBar(),
          _buildSearchItem(),
          Expanded(child: _buildItemsList()),
        ],
      ),

如何在flutter中连续创建3个项目的动态列表视图

1 个答案: