颤动对齐单个子行

如何解决颤动对齐单个子行

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

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,height: 150,Container(
        color: Colors.blue,height: 80,],);
}

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

输出：

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

解决方法

请试试这个

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,height: 150,],Container(
        color: Colors.blue,height: 80,);
}

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

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

,

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

这是如何工作的？

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

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