Flutter中Row内嵌套Column时Image组件不显示问题咨询
问题原因
Column组件未获取到明确的纵向尺寸约束,内部嵌套的Flexible组件会将Image的可用渲染空间挤压为0,最终导致内容无显示- 现有写法未设置
Column的对齐属性,无法实现右下角对齐的需求
修复方案
- 给外层
Row添加crossAxisAlignment: CrossAxisAlignment.stretch属性,让内部Column可以撑满Row的全部纵向高度 - 移除
Image外层的Flexible组件,给Column添加mainAxisAlignment: MainAxisAlignment.end属性,让Column内部的内容从底部开始排列,搭配顶部的SizedBox即可实现将图片向下推移的效果 - 此时
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
相关产品推荐
相关产品推荐

