Question

我在包含GridView的列中有以下一组Widget。现在，GridView消耗了单个孩子的所有可用高度，超过了所需的高度。有没有办法告诉GridView仅为其子级使用所需的高度？

Column(
                  children: <Widget>[
                    Expanded(
                      flex: 15,
                      child: Container(
                          width: double.infinity,
                          decoration: BoxDecoration(
                            color: Color(0xff05697c),
                          ),
                          child: Align(
                            alignment: Alignment.center,
                            child: Text(
                              'Ihre Bestellung - Hier essen',
                              style: TextStyle(
                                  color: Colors.white,
                                  fontFamily: 'Kalam',
                                  fontWeight: FontWeight.bold,
                                  fontSize: 20),
                            ),
                          )),
                    ),
                    Expanded(
                        flex: 70,
                        child: Container(
                          child: GridView.builder(
                            shrinkWrap: false,
                            primary: true,
                            itemCount: orderedArticles.length,
                            gridDelegate:
                                SliverGridDelegateWithFixedCrossAxisCount(
                                    crossAxisCount: 2, childAspectRatio: 1.47),
                            itemBuilder: (context, index) {
                              return OrderedArticleEntry(
                                  deleteOrderedItem: deleteOrderedItem,
                                  orderedItem: orderedArticles[index]);
                            },
                          ),
                        )),
                    Expanded(
                        flex: 15,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: <Widget>[
                            Container(
                              margin: EdgeInsets.fromLTRB(5, 0, 0, 5),
                              child: MaterialButton(
                                onPressed: () {
                                  Navigator.pop(context);
                                },
                                child: const Text('Abbrechen',
                                    style: TextStyle(fontSize: 20)),
                                color: Color(0xfff4851c),
                                textColor: Colors.white,
                                elevation: 5,
                              ),
                            ),
                            Text(
                                'Gesamt: ${currencyFormat.format(_orderedTotal.toDouble())}',
                                style: TextStyle(
                                    fontFamily: 'Kalam',
                                    fontWeight: FontWeight.bold,
                                    fontSize: 18,
                                    color: Color(0xff05697c))),
                            Container(
                              margin: EdgeInsets.fromLTRB(0, 0, 5, 5),
                              child: MaterialButton(
                                  elevation: 5,
                                  color: Color(0xff05697c),
                                  child: Text(
                                    'Ok',
                                    style: TextStyle(
                                      fontFamily: 'Kalam',
                                      fontSize: 20,
                                      fontWeight: FontWeight.bold,
                                      color: Colors.white,
                                    ),
                                  ),
                                  onPressed: () {
                                    if (_isOkButtonEnabled()) {
                                      _okButtonClicked();
                                    }
                                  }),
                            ),
                          ],
                        )),
                  ],
                )

这是OrderedArticleEntry的构建函数：

Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      child: Text(
          '${orderedItem.orderedQty.toString()} x ${orderedItem.article.articleName}',
          style: TextStyle(
              fontFamily: 'Kalam',
              fontWeight: FontWeight.bold,
              fontSize: 18,
              color: Color(0xff05697c))),
    );
}

这是它的样子：

Answer 1

如果每个人都解决了这个问题，解决方案是设置gridDelegate的childAspectRation。示例：

gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          childAspectRatio: MediaQuery.of(context).size.width /
              (MediaQuery.of(context).size.height / 4),
        ),

Flutter GridView.builder儿童身高

1 个答案: