如何使卡片内容可滚动？

Question

我正在为我的 Flutter 演示应用创建一个“简单”布局，但我遇到了布局问题。

布局由具有 2 个子项的 Column 组成。这些孩子正在使用 Card 小部件。

第一张卡片显示没有任何问题，但第二张卡片出现溢出错误The overflowing RenderFlex has an orientation of Axis.vertical.，并在第二张卡片底部显示黑色和黄色警告。如何使第二张卡片可滚动？尤其是Task标题下的内容？

我已经尝试过使用 ListView Widget，SingleChildScrollView Widget 也没有成功，总是出错。还检查了 flutter.dev 上的 Widget Srolling 文档页面，但不知道要使用什么...

这是没有 ListView 或 SingleChildScrollView 的代码，简单的小部件：（它在 pubspec.yml 中使用 grouped_buttons: ^1.0.4）

import 'package:flutter/material.dart';
import 'package:grouped_buttons/grouped_buttons.dart';

class HomePage extends StatefulWidget {
  String username = "Paris";

  HomePage({Key key, @required this.username}) : super(key: key);

  @override
  _HomePageState createState() => new _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text('Demo'),
      ),
      body: new Container(
        child: homeLayout(widget.username),
      ),
    );
  }
}

class _WeatherCard extends StatefulWidget {
  final String username;

  _WeatherCard({Key key, @required this.username}) : super(key: key);

  @override
  _WeatherCardState createState() {
    return new _WeatherCardState();
  }
}

class _WeatherCardState extends State<_WeatherCard> {
  @override
  Widget build(BuildContext context) {
    return new Card(
      child: new Container(
        margin: const EdgeInsets.only(top: 10.0, bottom: 10.0),
        child: new Column(
          children: <Widget>[
            new Text(
              widget.username,
              style: new TextStyle(
                fontSize: 40.0,
                fontWeight: FontWeight.w300,
              ),
            ),
            new Text(
              'July 29th 2019',
              style: new TextStyle(
                fontSize: 16.0,
                fontWeight: FontWeight.w300,
              ),
            ),
            new Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new Text(
                  'Sunny',
                  style: new TextStyle(
                    fontSize: 22.0,
                    fontWeight: FontWeight.w300,
                  ),
                ),
                new Text(
                  ' 24°C',
                  style: new TextStyle(
                    fontSize: 22.0,
                    fontWeight: FontWeight.w300,
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

class _TasksCard extends StatefulWidget {
  @override
  _TasksCardState createState() {
    return new _TasksCardState();
  }
}

class _TasksCardState extends State<_TasksCard> {
  @override
  Widget build(BuildContext context) {
    return new Card(
      child: new Container(
        margin: const EdgeInsets.only(top: 10.0, bottom: 10.0),
        child: new Column(
          children: <Widget>[
            new Text(
              'Tasks',
              style: new TextStyle(
                fontSize: 26.0,
              ),
            ),
            new Row(
              children: <Widget>[
                new Expanded(child: new Divider()),
              ],
            ),
            new CheckboxGroup(
              labels: <String>[
                "Task 1",
                "Task 2",
                "Task 3",
                "Task 4",
                "Task 5",
                "Task 6",
                "Task 7",
                "Task 8",
                "Task 9",
                "Task 10",
                "Task 11",
                "Task 12",
                "Task 13",
                "Task 14",
                "Task 15",
                "Task 16",
                "Task 17",
                "Task 18",
                "Task 19",
                "Task 20",
                "Task 21",
              ],
              onChange: (bool isChecked, String label, int index) =>
                  print("isChecked: $isChecked   label: $label  index: $index"),
              onSelected: (List<String> checked) =>
                  print("checked: ${checked.toString()}"),
            ),
          ],
        ),
      ),
    );
  }
}

@override
Widget homeLayout(username) {
  return new Container(
    padding: const EdgeInsets.symmetric(
      vertical: 5.0,
      horizontal: 5.0,
    ),
    child: new Column(
      children: <Widget>[
        new _WeatherCard(username: username),
        new Expanded(
          child: new _TasksCard(),
        ),
      ],
    ),
  );
}

任务列表应该是可滚动的。也许我认为布局类型错误？

Answer 1

这很简单 - 在您的代码中 - 在 _TasksCard 类中。

编辑代码如下：

......
Expanded(
              child: SingleChildScrollView(
                child: new CheckboxGroup(
                  labels: <String>[
                    "Task 1",
                    "Task 2",
                    .....