You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter中Row内嵌套Column时Image组件不显示问题咨询

问题原因
  • Column组件未获取到明确的纵向尺寸约束,内部嵌套的Flexible组件会将Image的可用渲染空间挤压为0,最终导致内容无显示
  • 现有写法未设置Column的对齐属性,无法实现右下角对齐的需求
修复方案
  1. 给外层Row添加crossAxisAlignment: CrossAxisAlignment.stretch属性,让内部Column可以撑满Row的全部纵向高度
  2. 移除Image外层的Flexible组件,给Column添加mainAxisAlignment: MainAxisAlignment.end属性,让Column内部的内容从底部开始排列,搭配顶部的SizedBox即可实现将图片向下推移的效果
  3. 此时Image自然处于Row的右下角位置,符合需求
修复后代码
Row(
  crossAxisAlignment: CrossAxisAlignment.stretch, // 新增属性,让内部Column撑满纵向高度
  children: <Widget>[  
    Flexible(                                        
      child: ListView.builder(
        shrinkWrap: true,
        physics: ClampingScrollPhysics(),
        itemCount: bulletList[Index].length,
        itemBuilder: (BuildContext ctxt, int Index) {
          return ListView(
            shrinkWrap: true,
            padding: const EdgeInsets.all(1),
            children: <Widget>[                                                      
              ListTile(
                leading: CircleAvatar(
                  radius: 6.0,
                  backgroundColor: Colors.black,
                ),
                title : Text(bulletList[Index][Index], style: TextStyle(color: Colors.red, fontSize: 25,),)
              ),
            ]
          );
        },                                          
      ),
    ),
    Column(
      mainAxisAlignment: MainAxisAlignment.end, // 新增属性,让内部内容靠底部排列
      children: <Widget>[ 
        SizedBox( height: 2,),
        GestureDetector(
          child: Image(
            image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
            height: 15,
            width: 15,
            fit: BoxFit.cover,
          ),
        ),
      ],
    ),
  ],
),

内容的提问来源于stack exchange,提问作者Aquarius_Girl

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.07 06:15:03