为什么红色图层显示在Flutter上

Question

我正在创建一个日历小部件。 我们在一周中的行标题中添加了一个DecoratedBox。 为什么使用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

这是一个溢出的问题;

你可以用你的内固定widthContainer

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

或者你可以用你的内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]; 
    } 
}