Flutter帖子详情页如何实现图片与右侧描述的布局？

根据你需要实现的效果，我调整了代码，实现左侧图片搭配右侧上下两行说明文字的布局，具体修改如下：

修改后的完整代码 #

class PostDetailState extends State<WorkoutPostDetail> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 20, left: 10, right: 10),
      child: Container(
        height: 135,
        width: MediaQuery.of(context).size.width * 0.90,
        decoration: ShapeDecoration(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(10)),
          ),
          color: Colors.white,
          shadows: [
            BoxShadow(
              color: Colors.grey.shade400,
              blurRadius: 5,
              spreadRadius: 2,
            ),
          ],
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            // 左侧图片
            Padding(
              padding: const EdgeInsets.all(12.0),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(8),
                child: Image.asset(
                  'assets/your_image.png', // 替换成你的图片路径
                  width: 80,
                  height: 80,
                  fit: BoxFit.cover,
                ),
              ),
            ),
            // 右侧说明文字列
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    '使用说明',
                    style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  SizedBox(height: 8),
                  Text(
                    '点击图片查看完整教程，左右滑动切换不同动作',
                    style: TextStyle(
                      fontSize: 14,
                      color: Colors.grey.shade600,
                    ),
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

关键修改说明 #

• 布局结构优化：去掉原有的嵌套Row，改用主Row直接承载图片和文字列，实现清晰的左右布局
• 图片处理：用ClipRRect给图片添加圆角，通过Image.asset加载本地图（网络图可替换为Image.network），设置合适的宽高和内边距
• 文字布局：用Expanded包裹文字列，确保文字区域占满剩余空间；两行文字区分样式，标题加粗突出，描述用灰色小字，同时限制行数避免溢出
• 对齐调整：给主Row设置垂直居中对齐，让整体布局更协调

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