Flutter：如何制作含图片及多文本的Container并调整图片位置

要实现图片左侧、文本右侧的横向布局，你可以用Row组件替代原来的Padding作为Container的子组件，右侧用Column来容纳多个Text组件，具体修改代码如下：

body: ListView(
  children: [
    Container(
      width: 500,
      color: Colors.white24,
      height: 125,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center, // 垂直方向居中对齐
        children: [
          // 左侧图片
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16.0), // 给图片加左右间距
            child: Image.asset(
              'images/HPerm.png',
              height: 100, // 控制图片高度，避免超出Container
              fit: BoxFit.contain,
            ),
          ),
          // 右侧文本区域
          Expanded( // 用Expanded让文本区域占满剩余空间
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center, // 文本垂直居中
              crossAxisAlignment: CrossAxisAlignment.start, // 文本左对齐
              children: [
                Text('标题文本'),
                SizedBox(height: 8), // 两个Text之间的间距
                Text('描述文本内容'),
                Text('更多文本信息'),
              ],
            ),
          ),
        ],
      ),
    ),
  ],
),

关键说明： #

• Row负责横向排列图片和文本区域，通过crossAxisAlignment控制垂直方向的对齐方式
• Expanded确保右侧文本区域能占满Container的剩余宽度，避免内容溢出或布局错乱
• Column用来垂直排列多个Text组件，通过mainAxisAlignment调整文本的垂直位置
• 可以通过Padding、SizedBox来调整元素之间的间距，优化布局美观度

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