如何使我的 ListView 在 flutter 中可滚动？

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

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

Answer 2

试试这个代码

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

对于可滚动的列，只需将列更改为行

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

Answer 3

只需用 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,
            ),
          ),
        ),
      ),
    ],
  )
);

如何使我的 ListView 在 flutter 中可滚动？

How can I make my ListView in flutter scrollable?

android

ios

flutter

listview

cross-platform