如何在Flutter的Container组件中实现图文并排布局？

要实现同一Container内的图文并排，核心是用Row组件替代原代码中单个的Padding+Image作为Container的子元素——Row支持横向排列多个子组件，刚好满足图文同容器并排的需求。修改后的完整代码如下：

body: ListView(
  children: [
    Container(
      width: 500,
      color: Colors.white24,
      height: 125,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center, // 让图文垂直居中对齐
        children: [
          // 图片区域，调整右侧内边距和文字拉开距离
          Padding(
            padding: const EdgeInsets.only(right: 16.0),
            child: Image.asset('images/HPerm.png'),
          ),
          // 文字区域，用Expanded填充图片右侧剩余空白
          Expanded(
            child: Text(
              "这里替换成你需要的文字内容",
              style: TextStyle(fontSize: 16),
            ),
          ),
        ],
      ),
    ),
  ],
),

关键细节说明： #

• 原代码中Container的child只能容纳单个组件（Padding包裹的图片），无法同时放置文字；换成Row后，可在其children数组中添加任意多个子组件。
• crossAxisAlignment: CrossAxisAlignment.center确保图片和文字在垂直方向上居中对齐，符合常规视觉习惯。
• Expanded组件让文字自动占据图片右侧的剩余空间，避免文字过长时超出容器范围。
• 可根据需求调整Padding数值、文字样式或Row的对齐方式，进一步优化布局细节。

内容的提问来源于stack exchange，提问作者Spicy Pumpkin