Flutter：如何让这部分代码可滚动？答案

【问题标题】：Flutter: how to make this part of the code scrollable?Flutter：如何让这部分代码可滚动？
【发布时间】：2021-04-15 06:15:10
【问题描述】：

我正在开发一个颤振应用程序，我需要使部分代码可滚动。完整代码：

 return Scaffold(
      appBar: AppBar(
        title: Text(_title),
      ),
      body: Column(
        children: [
          Padding(
            padding: EdgeInsets.only(bottom: 30),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ...
            ],
          ),
          for (var day in data)
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Text(
                  day.getDate(),
                  style: getDataLabelStyle(),
                ),
                Text(
                  day.getStarting(),
                  style: getDataLabelStyle(),
                ),
                Text(
                  day.getEnding(),
                  style: getDataLabelStyle(),
                ),
              ],
            ),
        ],
      ),
    );

这部分应该是可滚动的：

          for (var day in data)
            Row(
              ...
              ],
            ),

您还可以看到应该滚动的部分：

提前致谢

【问题讨论】：

标签： flutter dart

【解决方案1】：

使用 ColumnBuilder，然后像这样用 singleChildScrollView 包裹它：

Expanded(
  child: SingleChildScrollView(
    child: Column(children: List.generate(data.lenght, (index){
      return  Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Text(
            day.getDate(),
            style: getDataLabelStyle(),
          ),
          Text(
            day.getStarting(),
            style: getDataLabelStyle(),
          ),
          Text(
            day.getEnding(),
            style: getDataLabelStyle(),
          ),
        ],
      );
    }),),
  ),
)

【讨论】：

【解决方案2】：

您可以使用SingleChildScrollView 类来完成您的任务。

对于您给定的代码，您可以通过将您的行包装到 Column 并再次使用 SingleChileScrollView 包装来实现此目的。

完整的解决方案是：

....
SingleChildScrollView(
        child: Column(
          children: [
            for (var day in data)
              Row(
                children: [
                  .......
                ],
              ),
           ],
         ),
),

【讨论】：

【解决方案3】：

用SingleChildScrollView 包裹该部分。如果您在Column 中使用SingleChildScrollView，请不要忘记用Expanded 包装它。

例子，

Expanded(
        child: SingleChildScrollView(
          child: Container(
            child: yourCustomWidget()
          ),
        ),
      ),

【讨论】：