如何与动态容器的顶部（开始）和底部（结束）对齐？

Question

我正在尝试以将 Row 拆分两次的方式布局我的容器，并使用两个单独的 Column。 在这些单独的列中，我希望能够在使用flex: 7 扩展的第一行内的容器底部以及Container 的顶部显示文本。这些文本小部件将在绘制第一列中的每个容器时动态变化。

将Container 内的第一个Row 中的crossAxisAlignment: CrossAxisAlignment.start 更改为crossAxisAlignment: CrossAxisAlignment.end 会得到我希望它位于文本底部的文本。但是crossAxisAlignment: CrossAxisAlignment.start 正在处理文本的顶部。

我还尝试在两个文本字段之间使用Expanded 小部件，但由于高度无限且无法计算容器的大小而失败。我不想向我的容器添加约束，除非约束是动态定义的。我还尝试将所有内容包装在 Expanded 小部件中，我尝试使用 Position 小部件，但这些选项都不起作用。

这是我想要完成的一个非常精美的绘图：

这是我的代码：

class TestingSomething extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        Column(
          children: [
            Container(
              alignment: Alignment.center,
              padding: EdgeInsets.all(10),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: [
                  Expanded(
                    flex: 7,
                    child: Column(
                      children: [
                        Padding(
                          padding: EdgeInsets.all(10),
                          child: Text("Hope"),
                        ),
                        Align(
                          alignment: Alignment.bottomCenter,
                          child: Text("test"),
                        ),
                      ],
                    ),
                  ),
                  Expanded(
                    flex: 3,
                    child: Column(
                      children: [
                        Text(
                            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum")
                      ],
                    ),
                  )
                ],
              ),
              decoration: BoxDecoration(
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.3),
                      spreadRadius: 2,
                      blurRadius: 1,
                      offset: Offset(-1, 3), // changes position of shadow
                    ),
                  ],
                  color: Colors.red.shade600,
                  borderRadius: BorderRadius.circular(10)),
            )
          ],
        )
      ],
    );
  }
}

我已经坚持了好几个小时了。提前致谢。

Answer 1

这行得通。需要将IntrinsicHeight 小部件和Row 与crossAxisAlignment: CrossAxisAlignment.stretch 结合起来

ListView(
    children: [
      Column(
        children: [
          Container(
            alignment: Alignment.center,
            padding: EdgeInsets.all(10),
            child: IntrinsicHeight(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                mainAxisSize: MainAxisSize.min,
                children: [
                  Expanded(
                    flex: 7,
                    child: Column(
                      mainAxisSize: MainAxisSize.max,
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Padding(
                          padding: EdgeInsets.all(10),
                          child: Text("Hope"),
                        ),
                        Align(
                          alignment: Alignment.bottomCenter,
                          child: Text("test"),
                        ),
                      ],
                    ),
                  ),
                  Expanded(
                    flex: 3,
                    child: Column(
                      children: [
                        Text(
                            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum")
                      ],
                    ),
                  )
                ],
              ),
            ),
            decoration: BoxDecoration(
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withOpacity(0.3),
                    spreadRadius: 2,
                    blurRadius: 1,
                    offset: Offset(-1, 3), // changes position of shadow
                  ),
                ],
                color: Colors.red.shade600,
                borderRadius: BorderRadius.circular(10)),
          )
        ],
      )
    ],
  )