为什么 Flutter 上会显示红色层答案

【问题标题】：Why the red layer is displayed on Flutter为什么 Flutter 上会显示红色层
【发布时间】：2018-02-27 22:52:43
【问题描述】：

我正在创建一个日历小部件。我们在星期几的 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;
  }
}

【问题讨论】：

标签： flutter

【解决方案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 的大小，这样无需滚动即可显示整个视图，但在这里您需要修改布局设计一点点

我添加了一段可能对你有帮助的代码：

@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];
  }
}

【讨论】：