Flutter 布局扩展麻烦答案

【问题标题】：Flutter layout expanded troubleFlutter 布局扩展麻烦
【发布时间】：2018-11-25 13:00:32
【问题描述】：

我试试这个布局

卡片
- 行
  - 展开（弹性：4）
    - 图片
  - 展开（弹性：4）
    - 列（这是重要的列）
      - 行、行、行

现在我想使用 Column 的 MainAxisAlignment.spaceBetween 我看到该列没有父行的高度。因为图像的高度例如是 200.0

Expanded(4) 小部件用于将卡片拆分到两侧，因为原始图像尺寸更大。如果我手动设置父 ROW 的高度然后工作正常，但我不想手动设置高度。

如果我尝试在列中使用另一个扩展，我会遇到异常。

还有一个小问题，Container 和 SizedBox 有什么不同？

感谢您的帮助

编辑：添加代码和屏幕

@override
  Widget build(BuildContext context) {
    return new Card(
      child: new Container(
        padding: new EdgeInsets.only(left: 5.0),
        child: new Row(
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[new Expanded(flex: 4, child: new Image.network(_tour.hotel.thumbnail)), new Expanded(flex: 4, child: _buildInfoColumn())],
        ),
      ),
    );
  }

  Widget _buildInfoColumn() {
    return new Container(
              padding: new EdgeInsets.only(left: 3.0),
              child: new Column(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.spaceBetween, //this is not working
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  new Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      new Text(_tour.hotel.name, style: new TextStyle(fontSize: 14.0, fontFamily: 'Lato')),
                      new Text(_tour.hotel.country + ', ' + _tour.hotel.locality, style: new TextStyle(fontSize: 12.0, fontFamily: 'Lato', color: Colors.grey))
                    ],
                  ),
                  new Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      new Container(
                        padding: new EdgeInsets.only(left: 5.0),
                        child: new Row(
                          mainAxisSize: MainAxisSize.max,
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: <Widget>[
                            new Text(_tour.finalPrice.toString() + ',-', style: new TextStyle(fontSize: 15.0, fontWeight: FontWeight.bold, fontFamily: 'Lato', color: Colors.lightGreen)),
                            new Text(((_tour.discount > 0) ? '   ' + _tour.price.toString() + ',-' : ''), style: new TextStyle(fontSize: 12.0, fontFamily: 'Lato', color: Colors.red)),
                          ],
                        ),
                      ),
                      new Container(
                          padding: new EdgeInsets.all(2.0),
                          decoration: new BoxDecoration(color: Colors.red),
                          child: new Text(
                            '-' + _tour.discount.toString() + '%',
                            style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 11.0, fontFamily: 'Lato', color: Colors.white),
                          ))
                    ],
                  ),
                  new Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      new Row(
                        children: <Widget>[_buildTransportIcon(), _buildDates()],
                      ),
                      new Container(
                          padding: new EdgeInsets.only(right: 5.0),
                          child: new Row(
                            children: ((_tour.hotel.stars != null)
                                ? new List.generate(
                                    _tour.hotel.stars,
                                    (i) => new Icon(
                                          Icons.star,
                                          color: Colors.orangeAccent,
                                          size: 13.0,
                                        ))
                                : []),
                          ))
                    ],
                  )
                ],
              )
    );

【问题讨论】：

截屏可以很好地查看当前结果，以便更容易理解您的描述。
好的，我在问题下方添加了屏幕和代码。
这个归档应该是什么 mainAxisAlignment: MainAxisAlignment.spaceBetween？也许添加预期结果的图像可以帮助澄清问题

标签： android ios dart flutter flutter-layout

【解决方案1】：

MainAxisAlignment.spaceBetween 不起作用的原因是小部件不知道它会平均划分的大小。您可能需要考虑为 Card 小部件设置一个固定高度，然后裁剪显示的图像以适合小部件。

关于你关于Container和SizedBox的问题，最好解释一下here。

【讨论】：