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

Posted 2023-02-23

【中文标题】如何使我的 ListView 在颤动中可滚动？

【英文标题】：How can I make my ListView in flutter scrollable?

【发布时间】：2021-04-30 19:25:12

【问题描述】：

我是新来的颤振。我正在尝试构建一个卡片应用程序，并且每个卡片的套件都有一个 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,
            ),
          ),
        ),
      ),
  ],
);

【参考方案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,
            ),
          ),
        ),
      ),
    ],
  )
);

【参考方案2】：

试试这个代码

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

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

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

【参考方案3】：

答案太简单了！只需用 Expanded 小部件包装我正在调用列表视图的容器！