Flutter 对齐单个子元素答案

【问题标题】：Flutter align a single child in rowFlutter 对齐单个子元素
【发布时间】：2021-07-09 11:30:37
【问题描述】：

我有一个包含行数组的列，每行里面都有一些容器。这是我的代码：

import 'package:flutter/material.dart';

Widget row() {
  return Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Container(
        color: Colors.amber,
        width: 50,
        height: 100,
      ),
      Container(
        color: Colors.amber,
        width: 50,
        height: 150,
      ),
      Container(
        color: Colors.blue,
        width: 50,
        height: 80,
      ),
    ],
  );
}

class TestPage extends StatelessWidget {
  const TestPage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        row(),
        Divider(),
        row(),
        Divider(),
        row(),
      ],
    );
  }
}

输出：

我想将蓝色容器与底部对齐，而不触及其他容器位置。我怎样才能做到这一点？这是我的预期结果：

【问题讨论】：

用Align包裹最后一个蓝色容器
@pskink 它不起作用。结果相同

标签： flutter alignment row

【解决方案1】：

请试试这个

import 'package:flutter/material.dart';

Widget row() {
  return Row(
    crossAxisAlignment: CrossAxisAlignment.end,
    children: [
      Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            color: Colors.amber,
            width: 50,
            height: 100,
          ),
          Container(
            color: Colors.amber,
            width: 50,
            height: 150,
          ),
        ],
      ),
      Container(
        color: Colors.blue,
        width: 50,
        height: 80,
      ),
    ],
  );
}

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        row(),
        Divider(),
        row(),
        Divider(),
        row(),
      ],
    );
  }
}

【讨论】：

【解决方案2】：

使用 CrossAxisAlignment end 获取主行并将 Amber 包裹在另一行中，并使用 CrossAxisAlignment start 声明它。

这是如何工作的？

由于您的蓝色容器现在将位于主行内，并且现在使用 CrossAxisAlignment.end 声明，因此它将与父对齐方式一起使用。

Widget row() {
  return Row(
    crossAxisAlignment: CrossAxisAlignment.end,
    children: [
      Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
        Container(
          color: Colors.amber,
          width: 50,
          height: 100,
        ),
        Container(
          color: Colors.amber,
          width: 50,
          height: 150,
        )
      ]),
      Container(
        alignment: Alignment.bottomCenter,
        color: Colors.blue,
        width: 50,
        height: 80,
      ),
    ],
  );
}

【讨论】：