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')],
            )
          ]),
        ),
      ),
    );

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

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

我拿走了缺少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')],
                    )
                  ]),
            )),
      ),
    );

如何对齐行/列的子级？

1 个答案: