Flutter 我怎样才能在颤振中获得一排，以填充整个空间而不溢出？

我总是在flutter中遇到UI问题，尤其是在查看行/列及其大小时。基本上我拥有的是一行，其中有一张图片和一列。我想做的第一件事是用MainAxisAllignment.Spacebetween创建一行，这样TextA和TextB就尽可能远离彼此。我不能有两列，因为TextD可能很长，它会将TextB从屏幕上推出。我尝试过使用一些扩展的、灵活的和大的AxisSize，但我真的不知道应该如何做到这一点

通常我会画画，但我在Mac电脑上，不知道有什么东西能像画画一样完美，所以这里是我画的漂亮画。“应该”状态将是内行另一端的TextB

|---------------------------------------------------|
|  I  |--------------------------------------------||
|  M  |  |TextATextB|                              ||
|  A  |  |-Row------|                              ||
|  G  |  TextC                                     ||
|  E  |  TextD                                     ||
|     |-Column-------------------------------------||
|-Row-----------------------------------------------|

行(
儿童：[
图像网络(
图片，
身高：63，
),
大小盒子(
宽度：6，
),
纵队(
crossAxisAlignment:crossAxisAlignment.start，
mainAxisAlignment:mainAxisAlignment.spaceBetween，
儿童：[
划船(
mainAxisAlignment:mainAxisAlignment.spaceBetween，
儿童：[
文本（_viewModel.time），
文本（_viewModel.session），
],
),
文本（_viewModel.room），
大小盒子(
身高：2，
),
正文(
_viewModel.title，
溢出：TextOverflow.省略号，
maxLines:1，
样式：TextStyle（fontWeight:fontWeight.w900），
),
],
),
],
),

这是我如何制作这个小部件的代码。谢谢

编辑：我用Excel制作了一个希望不会混淆的版本。基本上：只要列是宽的，我就想排成一行

---

根据图片，以下是我的代码：

      Row(
        children: <Widget>[
          Container(child: Image(/*Your Image Here*/)),

          Column(
            children: <Widget>[
              Row( // THIS IS BLUE AND LIGHT BLUE ROW THAT SHOW UP IN THE IMAGE
                children: <Widget>[
                  Container(/*THIS IS YOUR BLUE ROW*/),
                  Container(/*THIS IS YOUR LIGHT BLUE ROW*/),
                ],
              ),

              Row( // THIS IS ANOTHER BLUE AND LIGHT BLUE ROW THAT DON'T SHOW UP IN THE IMAGE
                children: <Widget>[
                  Container(/*THIS IS YOUR ANOTHER BLUE ROW*/),
                  Container(/*THIS IS YOURANOTHER LIGHT BLUE ROW*/),
                ],
              ),

              // ADD MORE ROW HERE

            ],
          ),

        ],
      ),

行(
儿童：[
容器（子对象：图像（/*此处为您的图像*/），
纵队(
儿童：[
行（//这是显示在图像中的蓝色和浅蓝色行
儿童：[
容器（/*这是您的蓝色行*/），
容器（/*这是您的浅蓝色行*/），
],
),
行（//这是图像中未显示的另一个蓝色和浅蓝色行
儿童：[
容器（/*这是您的另一个蓝色行*/），
容器（/*这是另一个浅蓝色的行*/），
],
),
//在此处添加更多行
],
),
],
),

---

但是我仍然没有添加

MainAxisAlignment

或

CrossAxisAlignment

。而且它可能看起来仍然不像图像。但是，我已经做了它的核心基础。

< P>这是一个很好的问题。根据要求，您已经完成了大部分部分，缺少一些改进，因此，我将此添加到您的代码中，希望这对您有很大帮助：）

CrossAxisAlignment.stretch

是关键

确保使用扩展的

并将其环绕在
列中才能工作

最终解决方案

            // I have not used your data, just used mine for image, texts
            Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  Image.network(
                   "https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80",
                    height: 63.0,
                    width: 63.0
                  ),
                  SizedBox(width: 6.0),
                  Expanded(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: <Widget>[
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: <Widget>[
                            Text('Text A'),
                            Text('Text B'),
                          ],
                        ),
                        Text('Text C'),
                        SizedBox(height: 2.0),
                        Text(
                          'Text D',
                          overflow: TextOverflow.ellipsis,
                          maxLines: 1,
                          style: TextStyle(fontWeight: FontWeight.w900),
                        ),
                      ]
                    )
                  )
                ]
              )

//我没有使用你的数据，只是将我的数据用于图像、文本
划船(
mainAxisAlignment:mainAxisAlignment.start，
儿童：[
图像网络(
"https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&ixid=Eyjhchbawqiojeymdd9&w=1000&q=80“，
身高：63.0，
宽度：63.0
),
尺寸箱（宽度：6.0），
扩大(
子：列(
mainAxisAlignment:mainAxisAlignment.center，
crossAxisAlignment:crossAxisAlignment.stretch，
儿童：[
划船(
mainAxisAlignment:mainAxisAlignment.spaceBetween，
儿童：[
文本（“文本A”），
文本（“文本B”），
],
),
文本（“文本C”），
尺寸箱（高度：2.0），
正文(
“文本D”，
溢出：TextOverflow.省略号，
maxLines:1，
样式：TextStyle（fontWeight:fontWeight.w900），
),
]
)
)
]
)

您将得到的结果是

---

我希望这就是你想要的：）快乐学习

如果你想实现这样的目标，那么下面的代码片段将帮助你

IntrinsicHeight(
子项：行（crossAxisAlignment:crossAxisAlignment.stretch，子项：[
图像网络(
"https://media.gettyimages.com/photos/young-man-at-sunset-picture-id496261146?s=612x612",
fit:BoxFit.fill，
身高：69，
),
大小盒子(
宽度：6，
),
扩大(
子：列(
crossAxisAlignment:crossAxisAlignment.stretch，
mainAxisAlignment:mainAxisAlignment.spaceAround，
儿童：[
划船(
mainAxisAlignment:mainAxisAlignment.spaceBetween，
儿童：[
文本（“时间”），
案文（“会议”），
],
),
文本（“房间”），
大小盒子(
身高：2，
),
正文(
“我怎样才能在不溢出的情况下，让一排颤振声填满整个空间？”，
溢出：textfoverflow.e
IntrinsicHeight(
    child: Row(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
      Image.network(
        "https://media.gettyimages.com/photos/young-man-at-sunset-picture-id496261146?s=612x612",
        fit: BoxFit.fill,
        height: 69,
      ),
      SizedBox(
        width: 6,
      ),
      Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text("time"),
                Text("session"),
              ],
            ),
            Text("room"),
            SizedBox(
              height: 2,
            ),
            Text(
              "How can I get a Row in flutter to fill the entire space without overflowing?",
              overflow: TextOverflow.ellipsis,
              maxLines: 1,
              style: TextStyle(fontWeight: FontWeight.w900),
            ),
          ],
        ),
      ),
    ]),
  );