如何使 flutter 中的 ListView 可滚动？

Question

我是 flutter 的新手。 我正在尝试构建一个卡片应用程序，并且每个卡片的套件都有一个 ListView。 我刚刚意识到，当我将屏幕翻转到横向模式时，出现溢出错误。 我认为这会很好，因为我有一个 ListView。 但是没有。 所以我把它翻回纵向并添加了一些巨大的文字，看看它是否会滚动，令我惊讶的是它没有。

我做了一些研究并添加了physics: const AlwaysScrollableScrollPhysics(),但仍然无法正常工作。 感谢所有帮助！

ListView(
  scrollDirection: Axis.vertical,
  physics: const AlwaysScrollableScrollPhysics(),
  shrinkWrap: true,
  children: [
    for (var item in suites)
      Text('test', style: TextStyle(fontSize: 100.0),),
    for (var item in suites)
      FlatButton(
        onPressed: () {
          var suiteId = item.suiteId;
          var suite = item.suite;
          var suiteImage = item.suiteImage;
          var suiteColor = item.suiteColor;

          print(suiteColor);

          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => SuiteScreen(
                suiteId: suiteId,
                suite: suite,
                suiteImage: suiteImage,
                suiteColor: suiteColor,
              ),
            ),
          );
        },
        child: ListTile(
          leading: Icon(Icons.deck),
          title: Text(
            item.suite,
            style: TextStyle(
              fontSize: 30.0,
            ),
          ),
        ),
      ),
  ],
);

Answer 1

只需使用 SingleChildScrollView 小部件包装您的列表视图，然后它会正常工作。 您可以复制粘贴以下代码。

SingleChildScrollView(
  child: ListView(
  scrollDirection: Axis.vertical,
  physics: const AlwaysScrollableScrollPhysics(),
  shrinkWrap: true,
  children: [
    for (var item in suites)
      Text('test', style: TextStyle(fontSize: 100.0),),
    for (var item in suites)
      FlatButton(
        onPressed: () {
          var suiteId = item.suiteId;
          var suite = item.suite;
          var suiteImage = item.suiteImage;
          var suiteColor = item.suiteColor;

          print(suiteColor);

          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => SuiteScreen(
                suiteId: suiteId,
                suite: suite,
                suiteImage: suiteImage,
                suiteColor: suiteColor,
              ),
            ),
          );
        },
        child: ListTile(
          leading: Icon(Icons.deck),
          title: Text(
            item.suite,
            style: TextStyle(
              fontSize: 30.0,
            ),
          ),
        ),
      ),
    ],
  )
);

Answer 2

答案太简单了！ 只需将调用列表视图的容器包装为扩展小部件即可！

Answer 3

试试这个代码

您可以使用以下代码在 flutter 中实现可滚动行

对于可滚动列，只需将 Column 更改为 Row

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Row(
   children: <Widget>[
     Text('hi'),
     Text('hi'),
     Text('hi'),
   ]
  )
)