如何制作一个高度跟随JSON项目数量的底部操作面板

Question

在Flutter中创建BottomSheet时，使其高度根据JSON数据项数量自适应是否是你想要的效果吗？因为我之前的代码是将高度设置为屏幕高度的1/2，而不是根据数据量自适应。这样子如果手机屏幕比较长，就会在底部出现空白；反之如果屏幕比较短，数据就会被裁剪掉。这里是创建bottom sheet的代码：

void _showModalBottomSheet(AsyncSnapshot<CatlistResult> snapshot) {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext bc) {
          return Card(
            elevation: 3.0,
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.only(topLeft: Radius.circular(15), topRight: Radius.circular(15))),
            child: Container(
              padding: EdgeInsets.only(left: 16.0, top: 10.0, right: 16.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[
                  Container(
                    margin: EdgeInsets.only(bottom: 10.0),
                    child: Image.asset('assets/images/main/more_2lines_20dp.png', scale: 3.5),
                  ),
                  Expanded(
                    child: GridView.builder(
                      physics: NeverScrollableScrollPhysics(), //kill scrollable
                      shrinkWrap: true,
                      itemCount: snapshot == null ? 0 : snapshot.data.catlist.length,
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
                      itemBuilder: (BuildContext context, int index) {
                        var numItems = snapshot.data.catlist[index];
                        if (numItems.f == 1) {
                          if (numItems.b == 0) {
                            return GestureDetector(
                              child: Card(
                                elevation: 0.0,
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  children: <Widget>[
                                    Image.asset('assets/images/main/cat_${numItems.a}.png', fit: BoxFit.cover, width: 50.0, height: 50.0),
                                    Container(
                                      margin: EdgeInsets.only(top: 10.0),
                                      child: Text(
                                        numItems.c,
                                        maxLines: 2,
                                        textAlign: TextAlign.center,
                                        style: TextStyle(fontSize: 10),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            );
                          }
                        }
                      },
                    ),
                  ),
                ],
              ),
            ),
          );
        }
    );
  }

这是我的代码运行结果：

1. 在iOS模拟器上运行

2. 在Android模拟器上运行

- R Rifa Fauzi Komara

Answer 1

问题：

1. In your parent Column you are using

   mainAxisSize: MainAxisSize.max
   

2. You are also using Expanded in this Column which creates the empty space if there are less items in the GridView. Remove this Expanded widget.

---

解决方案：

Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisSize: MainAxisSize.min, // 1st use min not max
  children: <Widget>[
    Container(...),
    GridView.builder(...), // 2nd remove Expanded
  ],
)

- CopsOnRoad

---

为了完整回答，如果您在删除Expanded小部件时遇到“hasSize”不再为真的问题，您可以将Expanded替换为Flexible。 - Valentin Vignal