如何使卡片內容可滾動？

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