Flutter 两列两排颤振布局

我需要帮助建立一个布局，如下图所示

我的代码如下

Container(
  child: Padding(
    padding: const EdgeInsets.all(8.0),
    child: Row(
      children: <Widget>[
        Flexible(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                color: Colors.black,
                alignment: Alignment.topLeft,
                child: Image.network(
                  'https://images.freeimages.com/images/large-previews/13f/natal-sofia-4-1431300.jpg',
                  width: 200,
                  height: 200,
                ),
              ),
              Container(
                child: Text("Image Text", style: Theme.of(context).textTheme.bodyText1),
              ),
            ],
          ),
        ),
        Flexible(
          child: Container(
            padding: EdgeInsets.only(left: 8),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.start,
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Text(
                  'Heading',
                  style: Theme.of(context).textTheme.headline1,
                ),
                SizedBox(
                  height: 4,
                ),
                Text(
                  'Value',
                  style: Theme.of(context).textTheme.headline5,
                ),
              ],
            ),
          ),
        ),
      ],
    ),
  ),
);

容器(
孩子：填充(
填充：常数边集全部（8.0），
孩子：排(
儿童：[
灵活的(
子：列(
crossAxisAlignment:crossAxisAlignment.start，
儿童：[
容器(
颜色：颜色，黑色，
对齐：alignment.topLeft，
孩子：Image.network(
'https://images.freeimages.com/images/large-previews/13f/natal-sofia-4-1431300.jpg',
宽度：200，
身高：200，
),
),
容器(
子：文本（“图像文本”，样式：Theme.of（context.textTheme.bodyText1），
),
],
),
),
灵活的(
子：容器(
填充：仅限边缘设置（左：8），
子：列(
crossAxisAlignment:crossAxisAlignment.start，
mainAxisAlignment:mainAxisAlignment.start，
mainAxisSize:mainAxisSize.max，
儿童：[
正文(
“标题”，
风格：Theme.of（context）.textTheme.headline1，
),
大小盒子(
身高：4，
),
正文(
“价值”，
风格：Theme.of（context）.textTheme.headline5，
),
],
),
),
),
],
),
),
);

它正在生成一个UI，如下所示

如何将第二列字段与顶部而不是中间对齐

---

非常感谢您的帮助。

尝试将

crossAxisAlignment:crossAxisAlignment添加到
行
这里是一个完整的示例

import 'package:flutter/material.dart';

class RowAndColumn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    return Scaffold(
      body: Row(
        children: <Widget>[
          const SizedBox(width: 16),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                const SizedBox(height: 16),
                Expanded(
                  child: Container(
                    decoration: BoxDecoration(
                      border: Border.all(
                        color: Colors.black,
                      ),
                    ),
                  ),
                ),
                const SizedBox(height: 16),
                Container(
                  height: 56,
                  decoration: BoxDecoration(
                    border: Border.all(
                      color: Colors.black,
                    ),
                  ),
                ),
                const SizedBox(height: 16),
              ],
            ),
          ),
          const SizedBox(width: 16),
          SizedBox(
            width: width / 2,
            child: Column(
              children: <Widget>[
                const SizedBox(height: 16),
                Container(
                  height: 60,
                  decoration: BoxDecoration(
                    border: Border.all(
                      color: Colors.black,
                    ),
                  ),
                ),
                const SizedBox(height: 16),
                Container(
                  height: 60,
                  decoration: BoxDecoration(
                    border: Border.all(
                      color: Colors.black,
                    ),
                  ),
                ),
                const SizedBox(width: 16),
              ],
            ),
          ),
          const SizedBox(width: 16),
        ],
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
类RowAndColumn扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
最终宽度=MediaQuery.of（context）.size.width；
返回脚手架(
正文：世界其他地区(
儿童：[
常量大小框（宽度：16），
扩大(
子：列(
crossAxisAlignment:crossAxisAlignment.stretch，
儿童：[
const SizedBox（高度：16），
扩大(
子：容器(
装饰：盒子装饰(
边界：边界(
颜色：颜色，黑色，
),
),
),
),
const SizedBox（高度：16），
容器(
身高：56，
装饰：盒子装饰(
边界：边界(
颜色：颜色，黑色，
),
),
),
const SizedBox（高度：16），
],
),
),
常量大小框（宽度：16），
大小盒子(
宽度：宽度/2，
子：列(
儿童：[
const SizedBox（高度：16），
容器(
身高：60，
装饰：盒子装饰(
边界：边界(
颜色：颜色，黑色，
),
),
),
const SizedBox（高度：16），
容器(
身高：60，
装饰：盒子装饰(
边界：边界(
颜色：颜色，黑色，
),
),
),
常量大小框（宽度：16），
],
),
),
常量大小框（宽度：16），
],
),
);
}
}
crossAxisAlignment:crossAxisAlignment.start，将其添加到要打开的第一行以获得更好的视图您也可以尝试mainAxisAlignment