Question

我正在创建一个日历小部件。我们在星期几的行标题中添加了一个包装在Expanded中的DecorativeBox。为什么在使用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的大小，以便显示整个视图而无需滚动，但在此您需要修改设计你的布局有点

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

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

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

1 个答案: