Question

Screenshot of the problem 我试图通过在元素之间保持均匀的间距将元素放在红色框中。（就像给每个权重1一样）。为此，我将“ mainAxisAlignment：MainAxisAlignment.spaceEvenly”放在父列中，但是它不起作用。

Container(
            margin: EdgeInsets.only(bottom: 8.0),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                CachedNetworkImage(
                    imageUrl:
                        "https://image.tmdb.org/t/p/w500/${movieDetails
                        .posterPath}",
                    height: 120.0,
                    fit: BoxFit.fill),
                Expanded(
                    child: Container(
                        margin: EdgeInsets.only(left: 8.0),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly, //NOT WORKING!
                          children: <Widget>[
                            generateRow(
                                Strings.released, movieDetails.releaseDate),
                            generateRow(Strings.runtime,
                                movieDetails.runtime.toString()),
                            generateRow(Strings.budget,
                                movieDetails.budget.toString())
                          ],
                        )))
              ],
            )),

这是电影图像和红色框的代码。我创建了一个包含2个元素的行。第一个是那个图像，第二个是红色框。

Row generateRow(String key, String value) {
return Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[Text(key), Text(value)],
); }

我的generateRow方法

我该如何解决这个问题？

Answer 1

由于您已将image的高度设置为120.0，您是否可以为另一个Container的孩子做同样的事情。通过这样做，我能够实现您想要的东西。

代码段：

Container(
        margin: EdgeInsets.only(bottom: 8.0),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            CachedNetworkImage(
                imageUrl:
                    "https://image.tmdb.org/t/p/w500/${movieDetails
                    .posterPath}",
                height: 120.0,
                fit: BoxFit.fill),
            Expanded(
                child: Container(
                    height: 120.0 //added to fix
                    margin: EdgeInsets.only(left: 8.0),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly, //NOT WORKING!
                      children: <Widget>[
                        generateRow(
                            Strings.released, movieDetails.releaseDate),
                        generateRow(Strings.runtime,
                            movieDetails.runtime.toString()),
                        generateRow(Strings.budget,
                            movieDetails.budget.toString())
                      ],
                    )))
          ],
        )),

调试技巧：

我使用Flutter Inspector来查找问题。 Refer
请参考下图。即使我们给出了Expanded，它也只占据了图像大小的一半。 Expanded的大小由孩子的大小决定（几乎是图像大小的一半）。

Answer 2

尝试：

 new Container(
            margin: EdgeInsets.only(bottom: 8.0),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                CachedNetworkImage(
                    imageUrl:
                        "https://image.tmdb.org/t/p/w500/${movieDetails
                        .posterPath}",
                    height: 120.0,
                    fit: BoxFit.fill),
                Expanded(
                    child: Container(
                        margin: EdgeInsets.only(left: 8.0),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly, //NOT WORKING!
                          children: <Widget>[
                              new Row(
                                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                mainAxisSize: MainAxisSize.max,
                                children: <Widget>[
                                  new Text("Released : "),
                                  new Text("25-07-2018 "), 
                                ],
                              ),
                               new Row(
                                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                mainAxisSize: MainAxisSize.max,
                                children: <Widget>[
                                  new Text("Released : "),
                                  new Text("25-07-2018 "), 
                                ],
                              ),
                               new Row(
                                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                mainAxisSize: MainAxisSize.max,
                                children: <Widget>[
                                  new Text("Released : "),
                                  new Text("25-07-2018 "), 
                                ],
                              ),
                          ],
                        )))
              ],
            )),

Answer 3

获得结果的另一种方法：

Expanded(
     child: Center(
     child: // your widget here,
    ),
)

此人应该是Column的孩子，那么它将起作用。

Answer 4

尝试查看此信息： Flutter Layout Row / Column - share width, expand height

本质上，Row中的图像元素使行在横轴上展开，但行的实际约束未修改。这就是Column的{{1}}无法正常工作的原因。它需要一个父约束。这是在mainAxisAlignment: MainAxisAlignment.spaceEvenly的帮助下实现的。将IntrinsicHeight小部件包裹起来，会将行的约束设置为最大子级的大小（即图像）。

颤振-列中的均匀空间无法正常工作

4 个答案: