Flutter使用Row嵌套Column实现图文卡片时图片与文本不对齐如何解决

• 父级Row组件默认的crossAxisAlignment属性为CrossAxisAlignment.center，所有子元素会在垂直方向居中对齐，这是文本和图片没有顶部对齐的核心原因。
• 未给Row内的子元素配置空间分配规则，当文本内容过长时会出现水平溢出问题。
• 缺少卡片容器组件，当前代码没有套Card，也没有配置内边距、阴影等卡片样式，无法实现卡片效果。
• 左侧文本Column的crossAxisAlignment默认是居中对齐，文本不会靠左展示，不符合常规卡片的文本排版逻辑。

核心改动点如下：

1. 外层增加Card组件实现卡片效果，配置对应边距、阴影参数
2. 给Row增加crossAxisAlignment: CrossAxisAlignment.start实现子元素顶部对齐
3. 左侧文本Column外层套Expanded，占用Row内剩余空间，避免文本溢出
4. 给文本Column增加crossAxisAlignment: CrossAxisAlignment.start让文本左对齐

class ContactMe extends StatelessWidget {
  static const String route = '/contact_me';
  const ContactMe({Key? key}) : super(key: key);

  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;
    return Scaffold(
      body: Column(
        children: [
          CommonNavBar(height: height),
          Expanded(
            child: FutureBuilder(
                future: contactMe(),
                builder: (context, snapshot) {
                  if (snapshot.data == null)
                    return Center(child: CircularProgressIndicator());
                  else {
                    var data = snapshot.data as List<String>;
                    return LayoutBuilder(builder: (context, constraints) {
                      if (constraints.maxWidth < 1000) {
                        return Center();
                      } else {
                          return Card(
                            margin: const EdgeInsets.all(20),
                            elevation: 4,
                            child: Padding(
                              padding: const EdgeInsets.all(24),
                              child: Row(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Expanded(
                                    child: Column(
                                      mainAxisSize: MainAxisSize.min,
                                      crossAxisAlignment: CrossAxisAlignment.start,
                                      children: [
                                        text('Reach Out to me!', 25,
                                            Theme.of(context).primaryColorLight),
                                        const SizedBox(height: 12),
                                        const Text('anything'),
                                        // 可继续添加其他Text组件
                                      ],
                                    ),
                                  ),
                                  const SizedBox(width: 24),
                                  Image.asset('assets/contact_me/' + data[2], scale: 2),
                                ],
                              ),
                            ),
                          );
                      }
                    });
                  }
                }),
          ),
        ],
      ),
    );
  }
}

如果你需要左侧文本区域的高度和右侧图片高度完全一致，可以在Row外层套一层IntrinsicHeight组件，同时将Row的crossAxisAlignment属性改为CrossAxisAlignment.stretch即可。

内容的提问来源于stack exchange，提问作者Shourya Shikhar