Question

我插入了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.'),
              ),
            ],
          ),
        ),
        ...
        ...
        ...
      ],
    )    
  );
}

Answer 1

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

Answer 2

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

Answer 3

我需要将SingleChildScrollView放在Column内。 SingleChildScrollView小时候还需要Column，但在这种情况下，滚动条对我不起作用。解决方案是用SingleChildScrollView包装Expanded。所以这是它的外观：

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

Answer 4

您必须将其放在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,
);

Answer 5

这可能会达到目的，对我来说就像魅力：

shrinkWrap: true, physics: ClampingScrollPhysics(),

Answer 6

列中的列使得无需设置高度就无法计算布局。第二列是无用的，因为它只包含一个元素，尝试将ListTile直接作为卡的主体。

Answer 7

您应该使用ListView.builder代替内部列（正如我上面建议的那样，这些列不可滚动）。在ListView.builder中设置rinkleWrap：true，并设置物理：ClampingScrollPhysics（）。仅使用shrinkWrap：true不能解决我的问题。但是将物理学设置为ClampingScrollPhysics（）开始使它滚动。

Answer 8

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

Answer 9

通常有两种方法可以使屏幕滚动。一种是使用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属性。

Answer 10

只需添加物理：ClampingScrollPhysics(),

颤动 - 屏幕不滚动

10 个答案: