Flutter

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

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

Answer 2

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

Answer 3

你必须把它放在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 4

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

Answer 5

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

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

Answer 6

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

Answer 7

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

shrinkWrap: true, physics: ClampingScrollPhysics(),

Answer 8

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

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()，

Flutter - 屏幕不滚动

Flutter - The screen is not scrolling

dart