Flutter - 屏幕不滚动答案

【问题标题】：Flutter - The screen is not scrollingFlutter - 屏幕不滚动
【发布时间】：2017-11-17 05:55:16
【问题描述】：

我插入了 6 张卡片，但无法滚动屏幕。

根据下图，页脚出现红色条纹，屏幕不滚动。

能够滚动屏幕缺少什么？

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "Myapp",
      home: new HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => new Scaffold(
    appBar: new AppBar(
      backgroundColor: new Color(0xFF26C6DA),
    ),
    body: new Column(
      children: <Widget>[
        new Card(
          child: new Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              const ListTile(
                leading: const Icon(Icons.album),
                title: const Text('The Enchanted Nightingale'),
                subtitle: const Text('Music by Julie Gable. Lyrics by Sidney Stein.'),
              ),
            ],
          ),
        ),
        ...
        ...
        ...
      ],
    )    
  );
}

【问题讨论】：

标签： dart flutter

【解决方案1】：

只需添加物理：ClampingScrollPhysics()，

【讨论】：

这与这个问题的其他答案相同；重复这个问题的其他答案没有什么价值。

【解决方案2】：

通常有两种方法可以使屏幕可滚动。一种是使用Column，另一种是使用ListView。

使用列（包裹在SingleChildScrollView中）：

SingleChildScrollView( // Don't forget this. 
  child: Column(
    children: [
      Text('First'),
      //... other children
      Text('Last'),
    ],
  ),
)

使用ListView：

ListView(
  children: [
    Text('First'),
    //... other children
    Text('Last'),
  ],
)

这种方法使用起来更简单，但是你会失去像crossAxisAlignment 这样的功能。对于这种情况，您可以将您的子小部件包裹在 Align 中并设置 alignment 属性。

【讨论】：

【解决方案3】：

您应该使用 ListView.builder 代替内部列（正如我在上面建议的那样，列不可滚动）。在 ListView.builder 中设置 shrinkWrap: true 和physics: ClampingScrollPhysics()。仅使用 shrinkWrap: true 并没有解决我的问题。但是将物理设置为 ClampingScrollPhysics() 开始使其滚动。

【讨论】：

【解决方案4】：

这可能会奏效，对我来说很有魅力：

shrinkWrap: true, physics: ClampingScrollPhysics(),

【讨论】：

【解决方案5】：

您还可以将父 Column 包装在 Container 中，然后使用 SingleChildscrollView 小部件包装 Container。（这解决了我的问题）。

【讨论】：

【解决方案6】：

我需要将SingleChildScrollView 放在Column 中。 SingleChildScrollView 小时候也需要Column，但在那种情况下，卷轴对我不起作用。解决方案是用Expanded 包裹SingleChildScrollView。所以它看起来是这样的：

      Column(
        children: <Widget>[
          MyFirstWidget(),
          Expanded(
            child: SingleChildScrollView(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  // Scrollable content.
                ],
              ),
            ),
          ),
        ],
      ),

【讨论】：

【解决方案7】：

要使列可滚动，只需将其包装在 SingleChildScrollView 中即可。

【讨论】：

至少在我的情况下 SingleChildScrollView 不适用于 Column。我不得不使用 ListView。

【解决方案8】：

你必须把它放在 ListView.builder 上

ListView.builder(
    itemBuilder: (BuildContext context, int index){
    final item = yourItemLists[index];
    new Card(
      child: new Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          const ListTile(
            leading: const Icon(Icons.album),
            title: const Text('The Enchanted Nightingale'),
            subtitle: const Text('Music by Julie Gable. Lyrics by Sidney Stein.'),
          ),
        ],
      ),
    );
  },
  itemCount: yourItemLists.length,
);

【讨论】：

只是将 Column 更改为 ListView 导致异常。正如 Vinoth Kumar 在另一个问题中建议的那样，将 ListView 移动到 Expanded 完成了这项工作。来源：stackoverflow.com/questions/50688970/…

【解决方案9】：

列不滚动。尝试用 ListView 替换您的外部 Column。你可能需要把 shrinkWrap: true 放在上面。

【讨论】：

【解决方案10】：

一列中的一列使布局无法在不设置高度的情况下计算。第二列没有用，因为它只包含一个元素，请尝试将 ListTile 直接作为 Card 的主体。

【讨论】：