如何使卡片内容可滚动？

Question

我正在为Flutter演示应用程序创建一个“简单”布局，但是布局面临问题。

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

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

我已经尝试过使用ListView窗口小部件，也无法成功使用SingleChildScrollView窗口小部件，总是出现错误。 还检查了flutter.dev上的Widget Srolling文档页面，但不知道要使用什么...

这里是没有一个ListView或SingleChildScrollView代码，简单插件：（它使用grouped_buttons: ^1.0.4在pubspec.yml）

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",
                    .....