Flutter开发：如何实现文本旁显示图片？

嘿，我来帮你搞定这个布局问题！要让图片显示在文本旁边，核心是用Row组件来替代（或者嵌套）原来的Column——因为Row是横向布局容器，正好能实现并排效果。另外先提两个小建议：

• Dart的变量命名规范是小驼峰，所以Name、Alter建议改成name、age（如果是面向中文用户，age会比德语的Alter更易懂）
• Scaffold是页面级别的组件，不适合作为子组件使用：如果这个PersonalData是页面里的一个模块，应该去掉Scaffold只保留内容部分；如果它是单独页面，那可以保留，但子布局还是要调整。

下面是修改后的完整代码，我标注了关键改动：

import 'package:flutter/material.dart';

class PersonalData extends StatelessWidget {
  // 修正变量命名为小驼峰规范
  final String name;
  final String age;
  final String urlImage;

  // 构造函数同步调整变量名，添加key参数符合组件规范
  const PersonalData(this.name, this.age, this.urlImage, {super.key});

  @override
  Widget build(BuildContext context) {
    // 如果是单独页面则保留Scaffold，否则可以直接返回Row内容块
    return Scaffold(
      appBar: AppBar(title: Text(name)),
      body: Container(
        padding: const EdgeInsets.all(16), // 添加内边距避免内容贴边
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center, // 让图片和文本垂直居中对齐
          children: [
            // 加载网络图片，设置固定宽高+裁剪模式保证显示效果
            Image.network(
              urlImage,
              width: 80,
              height: 80,
              fit: BoxFit.cover,
            ),
            // 图片和文本之间添加间距
            const SizedBox(width: 16),
            // 文本部分用Column保持纵向排列
            Column(
              crossAxisAlignment: CrossAxisAlignment.start, // 文本左对齐
              children: [
                Text("Name: $name", style: const TextStyle(fontSize: 16)),
                const SizedBox(height: 8), // 两行文本之间的间距
                Text("Alter: $age", style: const TextStyle(fontSize: 16)),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

关键逻辑说明： #

1. 用Row作为外层容器，同时承载Image和文本的Column，实现横向并排布局
2. 给Image设置固定宽高和fit: BoxFit.cover，避免图片拉伸或显示异常
3. 通过SizedBox控制各元素间的间距，让布局更透气美观
4. 调整CrossAxisAlignment参数，让内容垂直居中对齐，优化视觉体验

如果你的PersonalData只是页面中的一个子组件（比如列表项），直接返回Row部分即可，去掉外层的Scaffold会让组件更灵活复用！

内容的提问来源于stack exchange，提问作者Anton Schrage