如何调整Flutter中GridView的高度并消除多余间距？

我用GridView展示两行Widget，但没法限制它的高度，也缩小不了间距，想消除图中红色区域的多余空隙，把底部Widget上移，试了好几次都没成功，求帮忙。

我的代码如下：

Expanded(
  child: Padding(
    padding: const EdgeInsets.all(8.0),
    child: GridView.count(
      crossAxisCount: 2,
      shrinkWrap: true,
      mainAxisSpacing: 0,
      crossAxisSpacing: 30,

      children: [
        //一つ目
        Visibility(
          visible: numberOfFeatures >= 3,
          child: Column(
            children: [
              TextField(
                decoration: InputDecoration(hintText: "ONE"),
                onChanged: (value) {
                  setState(() {
                    _slider1Text = value;
                    features[0] = _slider1Text;
                  });
                },
              ),
              Slider(
                  min: 0,
                  max: 35,
                  divisions: 15,
                  value: _slider1Value.toDouble(),
                  onChanged: _change1Slider),
            ],
          ),
        ),
        //二つ目
        Visibility(
          visible: numberOfFeatures >= 3,
          child: Column(
            children: [
              TextField(
                decoration: InputDecoration(hintText: "TWO"),
                onChanged: (value) {
                  setState(() {
                    _slider2Text = value;
                    features[1] = _slider2Text;
                  });
                },
              ),
              Slider(
                  min: 0,
                  max: 35,
                  divisions: 15,
                  value: _slider2Value.toDouble(),
                  onChanged: _change2Slider),
            ],
          ),
        ),
        //三つ目
        Visibility(
          visible: numberOfFeatures >= 3,
          child: Column(
            children: [
              TextField(
                decoration: InputDecoration(hintText: "THREE"),
                onChanged: (value) {
                  setState(() {
                    _slider3Text = value;
                    features[2] = _slider3Text;
                  });
                },
              ),
              Slider(
                  min: 0,
                  max: 35,
                  divisions: 15,
                  value: _slider3Value.toDouble(),
                  onChanged: _change3Slider),
            ],
          ),
        ),

        //4つ目
        Visibility(
          visible: numberOfFeatures >= 4,
          child: ListTile(
            title: TextField(
              onChanged: (value) {
                setState(() {
                  _slider4Text = value;
                  features[3] = _slider4Text;
                });
              },
            ),
            subtitle: Slider(
                min: 0,
                max: 35,
                divisions: 15,
                value: _slider3Value.toDouble(),
                onChanged: _change4Slider),
          ),
        ),
      ],
    ),
  ),
),

解决方案 #

1. 移除Expanded，改用ConstrainedBox限制高度 #

Expanded会强制GridView占满父组件剩余空间，这是底部空隙的核心原因。换成ConstrainedBox指定最大高度，配合shrinkWrap: true让GridView自适应内容高度：

ConstrainedBox(
  constraints: BoxConstraints(maxHeight: 300), // 根据实际内容调整高度
  child: Padding(
    padding: const EdgeInsets.all(8.0),
    child: GridView.count(
      crossAxisCount: 2,
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(), // 不需要滚动时添加，避免内部滚动冲突
      mainAxisSpacing: 0,
      crossAxisSpacing: 30,
      // 保留原有children
    ),
  ),
)

2. 修复Visibility的占位问题 #

默认Visibility会保留不可见组件的空间，导致多余空隙。给每个Visibility添加maintainSize: false：

Visibility(
  visible: numberOfFeatures >= 3,
  maintainSize: false, // 不可见时不占空间
  maintainState: true, // 可选：保留组件状态
  child: Column(...)
)

3. 统一子组件布局结构 #

第四个组件用了ListTile，和前三个的Column布局不一致，导致高度计算偏差。改成统一的Column结构：

Visibility(
  visible: numberOfFeatures >= 4,
  maintainSize: false,
  child: Column(
    children: [
      TextField(
        onChanged: (value) {
          setState(() {
            _slider4Text = value;
            features[3] = _slider4Text;
          });
        },
      ),
      Slider(
          min: 0,
          max: 35,
          divisions: 15,
          value: _slider4Value.toDouble(), // 修正之前的_slider3Value笔误
          onChanged: _change4Slider),
    ],
  ),
)

4. 缩小组件内边距 #

调整TextField的默认内边距，进一步压缩空间：

TextField(
  decoration: InputDecoration(
    hintText: "ONE",
    contentPadding: EdgeInsets.symmetric(vertical: 8, horizontal: 12), // 缩小输入框内边距
  ),
  // 其他参数不变
)

内容的提问来源于stack exchange，提问作者Tdayo