将小部件对齐到同级列的底部

Question

我在遵循两条规则重新创建屏幕截图中的布局时遇到问题：

两个Column的高度由左边的Column决定，因为内容（蓝色容器）在不同情况下可能会有所不同。
右侧的 Column 应与左侧的列高度相同，并且其子项（黄色和红色容器）应相应地与列的顶部和底部对齐。

这是我目前拥有的

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Container(
        color: Colors.black12.withOpacity(0.1),
        padding: const EdgeInsets.all(24),
        child: Row(
          children: [
            Container(
              padding: const EdgeInsets.all(24),
              color: Colors.green,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Container(
                    height: 500,
                    width: 200,
                    color: Colors.blue,
                  )
                ],
              ),
            ),
            Container(
              padding: const EdgeInsets.all(24),
              color: Colors.greenAccent,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Container(
                    padding: const EdgeInsets.all(24),
                    height: 100,
                    width: 200,
                    color: Colors.yellow,
                  ),
                  Container(
                    padding: const EdgeInsets.all(24),
                    height: 100,
                    width: 200,
                    color: Colors.red,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

看起来像这样：

现在谈谈我尝试过的事情和遇到的问题：

将右列更改为 mainAxisSize: MainAxisSize.max, 会导致右列决定高度。

在黄色和红色容器之间添加 Spacer 会导致右侧列扩展到最大高度。

所以问题是：我怎样才能限制右栏的高度所以

沿用左栏的高度，不占用所有可用高度
保持整个布局动态的高度（因此蓝色容器或左列没有硬编码高度）
将右列中的容器与右列的顶部和底部对齐。

我觉得我遗漏了一些东西或需要一个我不知道的特殊小部件。也许 Flexible?

的一些高级用法

我们非常欢迎任何想法或提示。谢谢。

==========================

基于

的完整解决方案

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Container(
        color: Colors.black12.withOpacity(0.1),
        padding: const EdgeInsets.all(24),
        child: Center(
          child: IntrinsicHeight(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Container(
                  padding: const EdgeInsets.all(24),
                  color: Colors.green,
                  child: SingleChildScrollView(
                    child: Column(
                      children: [
                        Container(
                          height: 500,
                          width: 200,
                          color: Colors.blue,
                        )
                      ],
                    ),
                  ),
                ),
                Container(
                  padding: const EdgeInsets.all(24),
                  color: Colors.greenAccent,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Container(
                        padding: const EdgeInsets.all(24),
                        height: 200,
                        width: 200,
                        color: Colors.yellow,
                      ),
                      Container(
                        padding: const EdgeInsets.all(24),
                        height: 50,
                        width: 200,
                        color: Colors.red,
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

我让你的例子像这样工作

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Container(
        color: Colors.black12.withOpacity(0.1),
        padding: const EdgeInsets.all(24),
        child: Align(
          child: IntrinsicHeight(
            child: Row(
              children: [
                Container(
                  padding: const EdgeInsets.all(24),
                  color: Colors.green,
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Container(
                        height: 500,
                        width: 200,
                        color: Colors.blue,
                      )
                    ],
                  ),
                ),
                Container(
                  padding: const EdgeInsets.all(24),
                  color: Colors.greenAccent,
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Container(
                        padding: const EdgeInsets.all(24),
                        height: 100,
                        width: 200,
                        color: Colors.yellow,
                      ),
                      const Spacer(),
                      Container(
                        padding: const EdgeInsets.all(24),
                        height: 100,
                        width: 200,
                        color: Colors.red,
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

所以基本上 Row 包裹在 IntrinsicHeight 中，而那个包裹在 Align 中。只是一个 IntrinsicHeight 似乎没有帮助。此外，第二个 Column

中 Container 之间的 Spacer()

Answer 2

试试这个代码..

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',

      home: Container(
        color: Colors.white,

        child: Row(
          children: [
            Flexible(child: Container(
              height: MediaQuery.of(context).size.height,
              padding: const EdgeInsets.all(24),
              color: Colors.green,
              child:  Container(
                height: 500,
                width: MediaQuery.of(context).size.width,
                color: Colors.blue,
              ),
            ),flex: 1,),
          const SizedBox(width: 2.0,),
          Flexible(child:   Container(
            height: MediaQuery.of(context).size.height,
            padding: const EdgeInsets.all(24),
            color: Colors.greenAccent,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  padding: const EdgeInsets.all(24),
                  height: 100,
                  width: 200,
                  color: Colors.yellow,
                ),
                Container(
                  padding: const EdgeInsets.all(24),
                  height: 50,
                  width: 200,
                  color: Colors.red,
                ),
              ],
            ),
          ),flex: 1,)
          ],
        ),
      ),
    );
  }

将小部件对齐到同级列的底部

Align widget to bottom of sibling column

flutter

flutter-layout

flutter-widget