底部溢出 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 ), ], )