flutter - 为什么在Flutter上显示红色层

Question

我正在创建一个日历小部件。我们在星期几的 Row 标题中添加了一个用 Expanded 包裹的 DecoratedBox。为什么使用Expanded时显示红色图层？

排除Expanded时，DecoratedBox不展开...

class CalenderPage extends StatefulWidget {
  @override
  _CalenderPageState createState() => new _CalenderPageState();
}

class _CalenderPageState extends State<CalenderPage> {
  DateTime now = new DateTime.now();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Calender'),
      ),
      body: new Center(
        child: new Column(children: <Widget>[
          new Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: _createWeekOfDays()),
        ]),
      ),
    );
  }

  List<Widget> _createWeekOfDays() {
    List<Widget> _weekOfDays = new List<Widget>();
    for (final weekOfDay in ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun',]) {
      _weekOfDays.add(
        new Expanded(
          child: new DecoratedBox(
            position: DecorationPosition.background,
            decoration: new BoxDecoration(
              border: new Border.all(
                  color: Theme.of(context).dividerColor, width: 1.0),
            ),
            child: new Padding(
              padding: new EdgeInsets.only(top: 8.0, bottom: 8.0),
              child: new Text(
                weekOfDay,
                style: new TextStyle(fontWeight: FontWeight.bold),
                textAlign: TextAlign.center,
              ),
            ),
          ),
        ),
      );
    }
    return _weekOfDays;
  }
}

Answer 1

这是一个溢出问题；

您可以将 Row 包裹在固定的 width Container

中

body: new Center(
        child: new Column(children: <Widget>[
          new Container(
            width: 320.0,
          child: new Row(
            mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: _createWeekOfDays())),
        ]),
      ),

或者您可以将 Row 包装在 Padding 小部件中，并缩进右侧的区域，这样它就不会溢出到屏幕边缘

body: new Center(
        child: new Column(children: <Widget>[
          new Padding(
              padding: const EdgeInsets.only(right: 3.0),
              child: new Row(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: _createWeekOfDays())),
        ]),
      ),

或者，您可以使用 ListView 并指定 Container 的大小，这样无需滚动即可显示整个 View ，但在这里您需要稍微修改一下布局的设计

我添加了一段可能对您有帮助的代码:

@override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Calender'),
      ),
      body: new Container(
          height: 50.0,
          child: new ListView(
            scrollDirection: Axis.horizontal,
            children: new List.generate(7, (int index) {
              return new Card(
                child: new Container(
                      width: 43.0,
                      height: 30.0,
                      child: new Center(
                          child: new Text(_daysOfWeek(index))),
                    ),
              );
            }),
          ),
        ),
    );
  }
    _daysOfWeek(int index) {
    List myWeek = new List<String>(7);
    myWeek = ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun',];
    return myWeek[index];
  }
}