Flutter页面内容显示不全求助：如何完整展示所有组件

问题说明 #

我的Flutter页面内容无法完整展示，添加新Widget后依然无法加载并显示全部组件。以下是当前的代码实现：

return Scaffold(
  appBar: myMobileAppBar(false),
  body: Container(
    padding: const EdgeInsets.fromLTRB(15, 10, 10, 15),
    width: double.infinity,
    height: double.infinity,
    decoration: myDecoration,
    child: Column(
      children: [
        const MyLableObligatori(
          inputtext: 'Codice Prodotto:',
        ),
        Row(
          //Mycode
        ),
        const MyLable(inputtext: 'Codice Fattura:'),
        const MyTextField(),
        const MyLable(inputtext: 'Descrizione:'),
        const MyTextField(maxsize: 5),
        const SizedBox(
          height: 20,
        ),
        //Categoria List
        //const CategoriaList(),
        PrintCatList(categoriaDataSource),

        Row(
          //Mycode
        ),
        const SizedBox(
          height: 20,
        ),
        const MyLableObligatori(inputtext: 'Nome Fornitore:'),
        DropdownButton(items: null, onChanged: null),
        Align(
            //Mycode
          ),
        ),
      ],
    ),
  ),
);

解决方法 #

问题核心是Column本身不支持滚动，当子组件总高度超过屏幕可视区域时，内容会被截断。只需用SingleChildScrollView包裹Column，同时移除Container的height: double.infinity（SingleChildScrollView会自适应内容高度），修改后的代码如下：

return Scaffold(
  appBar: myMobileAppBar(false),
  body: Container(
    padding: const EdgeInsets.fromLTRB(15, 10, 10, 15),
    width: double.infinity,
    decoration: myDecoration,
    child: SingleChildScrollView( // 新增滚动组件
      child: Column(
        children: [
          const MyLableObligatori(
            inputtext: 'Codice Prodotto:',
          ),
          Row(
            //Mycode
          ),
          const MyLable(inputtext: 'Codice Fattura:'),
          const MyTextField(),
          const MyLable(inputtext: 'Descrizione:'),
          const MyTextField(maxsize: 5),
          const SizedBox(
            height: 20,
          ),
          //Categoria List
          //const CategoriaList(),
          PrintCatList(categoriaDataSource),

          Row(
            //Mycode
          ),
          const SizedBox(
            height: 20,
          ),
          const MyLableObligatori(inputtext: 'Nome Fornitore:'),
          DropdownButton(items: null, onChanged: null),
          Align(
              //Mycode
            ),
          ),
        ],
      ),
    ),
  ),
);

额外提示 #

如果PrintCatList是长列表组件（比如内部包含ListView），建议给它套上Expanded或让其自身支持滚动，避免嵌套滚动冲突。若PrintCatList高度固定，上述修改即可解决问题。

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