在 flutter 中跨多个列垂直对齐小部件

Question

假设我的第 1 列包含小部件 A、B 和 C，第 2 列包含小部件 D 和 E。第 1 列和第 2 列位于一行中。如何垂直对齐 A 与 D、C 与 E 。

    Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Column 1
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              WidgetA(), // Widget A
              WidgetB(), // Widget B
              WidgetC(), // Widget C
            ],
          ),
          const SizedBox(width: 20), // Add some space between columns
          // Column 2
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              WidgetD(), // Widget D
              SizedBox(height: 40), // Add spacing to align D with A
              WidgetE(), // Widget E
            ],
          ),
        ],
      ),

小部件 D 和 E 的大小根据其内容而变化。有“文本”小部件，可以是一行或多行高。

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(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Alignment test"),
        ),
        body: Column(
          children: [
            Row(
              children: [
                Container(
                  child: Text("Widget A"),
                ),
                Container(
                  child: Text("Widget D"),
                ),
              ],
            ),
            Row(
              children: [
                Expanded(
                  child: Container(
                    child: Text("Widget B"),
                  ),
                ),
                
                Expanded(
                  child: Container(),
                ),
              ],
            ),
            Row(
              children: [
                Container(
                  child: Text("Widget C"),
                ),
                Container(
                  child: Text("Widget E"),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

我在这里使用 Expanded 和一个空容器来确保 WidgetB 的宽度是有限的。您应该能够通过 WidgetA() 等将我的容器替换为文本。希望这会有所帮助！

如果我没有回答正确的问题：小部件的大小在哪个轴上可变？宽度还是高度？