Question

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

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

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

我已经尝试使用ListView窗口小部件，也无法成功使用SingleChildScrollView窗口小部件，总是出现错误。还检查了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",
                    .....

如何使卡片内容可滚动？

1 个答案: