flutter - 如何对齐行/列的子级？

Question

如何对齐Row的子级？我尝试了crossAxisAlignment: CrossAxisAlignment.end,，但我不希望我的所有Row小部件都使用CrossAxisAlignment。并且我尝试使用Align小部件指定的小部件(+1和圆圈)

Container(
        padding: EdgeInsets.only(top: 5.0),
        child: Column(
         // mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Align(
              alignment: Alignment.topLeft,
              child: Text('Colombo - New York'),
            ),
            Column(
                  children: <Widget>[
                    Row(
                        children: [
                      Column(
                        children: <Widget>[Text('Upper Left')],
                      ),
                      SizedBox(height: 200, child: const Card(child: Text('Column 1'))),
                      SizedBox(height: 200, child: const Card(child: Text('Column 2'))),
                      SizedBox(height: 200, child: const Card(child: Text('Column 3'))),
                      Column(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: <Widget>[Text('Bottom Right')],
                      )
                    ]),
                  ],

            )
          ],
        ),
      )

输出是所有小部件都是中心

我想要的方式

Answer 1

我不确定我是否完全理解这个问题，但是在您的代码注释中，您似乎想将左上角的东西和右下角的其他东西对齐，并在中心垂直对齐3列。

如果是这种情况，您可能应该学习Flutter的布局系统或做一些教程。

这是您似乎在阅读代码注释后尝试做的事情:



这是使用以下代码生成的:

import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('Layout Example'),
            backgroundColor: Colors.blueGrey[900],
          ),
          backgroundColor: Colors.blueGrey[50],
          body:
              Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
            Column(
              children: <Widget>[Text('Upper Left')],
            ),
            SizedBox(height: 200, child: const Card(child: Text('Column 1'))),
            SizedBox(height: 200, child: const Card(child: Text('Column 2'))),
            SizedBox(height: 200, child: const Card(child: Text('Column 3'))),
            Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[Text('Bottom Right')],
            )
          ]),
        ),
      ),
    );

无论这是否完全反射(reflect)了您要寻找的内容，也许您会发现它是一个很好的起点，您可以从中获得一些想要做的事情的想法。

编辑:
在回答上述问题时，您没有包含我给出的示例中的“行”小部件。请注意，有一行包含5个小部件的行将在主轴/水平轴上均匀分布。第一个小部件是一列，默认情况下，其中的“文本”小部件将转到该列的顶部。接下来的3列是小部件(我只是选择“大小框”作为强制增加高度的方法)。这3个小部件在行中垂直居中。该行中的最后一件事是“列”窗口小部件，该窗口小部件的主轴对齐方式为:末端将该列中的窗口小部件(文本/ BottomRight)强制移到该列的底部。

我拿走了缺少Row小部件容器的代码，并将其添加回去，输出看起来就像我之前发送的屏幕截图。这是我修改后的代码:

import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: Text('Layout Example'),
              backgroundColor: Colors.blueGrey[900],
            ),
            backgroundColor: Colors.blueGrey[50],
            body: Container(
              // padding: EdgeInsets.only(top: 5.0),
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Column(
                      children: <Widget>[Text('Upper Left')],
                    ),
                    SizedBox(
                        height: 200,
                        child: const Card(child: Text('Column 1'))),
                    SizedBox(
                        height: 200,
                        child: const Card(child: Text('Column 2'))),
                    SizedBox(
                        height: 200,
                        child: const Card(child: Text('Column 3'))),
                    Column(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: <Widget>[Text('Bottom Right')],
                    )
                  ]),
            )),
      ),
    );