底部溢出 224 像素的 RenderFlex

Question

如何修复以下错误？

一个 RenderFlex 在底部溢出了 224 个像素。

在列小部件上

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Read message'),
      ),
      body: Column( //the error is here
        children: [
          Padding(
            padding: const EdgeInsets.all(20.0).copyWith(bottom: 10),
            child: Row( ...

Answer 1

用SingleChildScrollView包裹你的Column

Answer 2

根据设备屏幕，这些小部件可能会溢出，处理它的解决方案很少。

1. 使用包含在 SingleChildScrollView 中的 Column

SingleChildScrollView（子：列（子：子），）

2. 使用列表视图

ListView（儿童：儿童）

3. 使用 Column 和 ListView 的组合（你应该使用 Expanded/Flexible，或者这样做时给 ListView 一个固定的高度）。

Column( children: [...children.take(2).toList(), // 显示 Column Expanded(child: ListView( children: children.getRange(3, children.length).toList(), 中的前 2 个子项) ), // 以及 ListView 中的 rest ), ], )