Flutter中如何获取ListView尺寸？如何限制Radio ListView避免溢出？

一、让ListView限制在文本与按钮之间（避免溢出） #

你当前给ListView设置了固定的height:500，这会导致父容器可用空间不足时出现溢出。正确做法是用Expanded组件包裹ListView，让它自动占据文本和按钮之间的剩余空间：

修改后的代码示例：

Widget _createVersionRadioTiles(List<String> versions) {
  var radioTiles = <Widget>[];
  for (var version in versionList) {
    var tile = Padding(
      padding: const EdgeInsets.all(8.0),
      child: RadioListTile<String>(
        selected: selectedVersion == version,
        tileColor: colorDarkGray,
        value: version,
        groupValue: selectedVersion,
        onChanged: (String? value) {
          setState(() {
            selectedVersion = value!.toString();
          });
        },
        title: Text(version),
      ),
    );
    radioTiles.add(tile);
  }
  // 该组件需放在Column容器中，上下分别对应文本和按钮
  return Expanded( // 用Expanded替代固定尺寸的SizedBox
    child: ListView(children: radioTiles),
  );
}

注意：_createVersionRadioTiles的父组件必须是Column、Row这类支持弹性布局的容器，且上下的文本和按钮不能使用Expanded，这样Expanded会自动将中间剩余空间分配给ListView，避免溢出。如果需要限制宽度，可给ListView套一层Container设置width，或使用ConstrainedBox，高度仍由Expanded处理。

二、获取ListView的尺寸 #

通过GlobalKey可以获取ListView的渲染尺寸，步骤如下：

1. 定义GlobalKey：

final GlobalKey _listViewKey = GlobalKey();

2. 给ListView绑定该Key：

ListView(
  key: _listViewKey,
  children: radioTiles,
)

3. 在ListView完成渲染后（比如组件初始化完成后、按钮点击时）调用以下代码获取尺寸：

void getListViewSize() {
  if (_listViewKey.currentContext != null) {
    RenderBox renderBox = _listViewKey.currentContext!.findRenderObject() as RenderBox;
    Size size = renderBox.size;
    print("ListView宽度：${size.width}，高度：${size.height}");
    // 此处可基于size做后续业务处理
  }
}

如果要在组件初始化时获取，可在initState中通过WidgetsBinding.instance.addPostFrameCallback触发：

@override
void initState() {
  super.initState();
  WidgetsBinding.instance.addPostFrameCallback((_) {
    getListViewSize();
  });
}

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