flutter Column嵌套ListView高度自适应问题

1.限制最大高度500,当布局高度小于500时高度自适应包裹

dart 复制代码
//当布局外不需要包裹Container时,使用ConstrainedBox(constraints: BoxConstraints(maxHeight: 500,minHeight: 0),child: Column())
_body(){
    return Container(
        constraints: BoxConstraints(maxHeight: 500,minHeight: 0),
        decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(10)
        ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            SizedBox(height: 40.w),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Container(width: 10),
                Expanded(
                    child: Text(
                      '选择二维码',
                      style: TextStyle(
                        fontSize: 30.sp,
                        color: JadeColors.grey_2,
                        fontWeight: FontWeight.w600,
                      ),
                      textAlign: TextAlign.center,
                    )),
                GestureDetector(
                  child: Container(
                    color: Colors.transparent,
                    padding: EdgeInsets.all(4),
                    margin: EdgeInsets.only(right: 20.w),
                    child: Image.asset(PathConfig.iconCloseWhite, width: 36.w, height: 36.w),
                  ),
                  onTap: () {
                    NavigatorUtil.pop();
                  },
                )
              ],
            ),
            Padding(padding: EdgeInsets.only(top: 20.w),
                child: Text('因阿推秀格口较多,请分批生成下载。',style: TextStyle(color: JadeColors.grey,fontSize: 24.sp))),
            Flexible(child: _listView())//Flexible灵活分配空间,未设置flex时默认尽可能小地包裹其内容
          ],
        )
        ,
      );
  }

  _listView(){
    return Padding(padding: EdgeInsets.only(left: 50.w,right: 50.w,top: 30.w),
    child: ScrollConfiguration(
    behavior: CusBehavior(),
    child: ListView.builder(
        shrinkWrap: true,
        itemBuilder: (_,index){
          return _itemButton(index);
        },itemCount: _testList.length))
    );
  }

  _itemButton(index){
    return Container(
      height: 170.w, width: double.infinity,
      padding: EdgeInsets.symmetric(horizontal: 40.w),
      margin: EdgeInsets.only(top: 20.w,bottom: index == _testList.length -1 ? 120.w : 0),
      decoration: BoxDecoration(color: JadeColors.grey_14, borderRadius: BorderRadius.circular(10)),
      child: Row(
        children: [
          Expanded(child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text('标题',style: TextStyle(fontSize: 32.sp,fontWeight: FontWeight.w600)),
              Text('描述',style: TextStyle(fontSize: 22.sp,fontWeight: FontWeight.w300,color: JadeColors.grey_3))
            ],)),
          GestureDetector(
            onTap: (){},
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 40.w,vertical: 15.w),
              decoration: BoxDecoration(
                  color: JadeColors.blue_30,
                  borderRadius: BorderRadius.circular(30),
                border: Border.all(color: JadeColors.blue_29)
              ),
              child: Text('查看',style: TextStyle(color: JadeColors.blue_2,fontSize: 24.sp),),
            ),
          )
        ],
      ),
    );
  }

2.限制布局最小高度50,当布局高度大于50时高度自适应包裹

dart 复制代码
ConstrainedBox(constraints: BoxConstraints(minHeight: 50,
child: Column(
mainAxisSize: MainAxisSize.min,//设置布局内容尽可能小
children: [
///
]
))
相关推荐
奋斗的小青年!!3 小时前
Flutter浮动按钮在OpenHarmony平台的实践经验
flutter·harmonyos·鸿蒙
程序员老刘6 小时前
一杯奶茶钱,PicGo + 阿里云 OSS 搭建永久稳定的个人图床
flutter·markdown
奋斗的小青年!!10 小时前
OpenHarmony Flutter 拖拽排序组件性能优化与跨平台适配指南
flutter·harmonyos·鸿蒙
小雨下雨的雨11 小时前
Flutter 框架跨平台鸿蒙开发 —— Stack 控件之三维层叠艺术
flutter·华为·harmonyos
行者9612 小时前
OpenHarmony平台Flutter手风琴菜单组件的跨平台适配实践
flutter·harmonyos·鸿蒙
小雨下雨的雨13 小时前
Flutter 框架跨平台鸿蒙开发 —— Flex 控件之响应式弹性布局
flutter·ui·华为·harmonyos·鸿蒙系统
cn_mengbei14 小时前
Flutter for OpenHarmony 实战:CheckboxListTile 复选框列表项详解
flutter
cn_mengbei14 小时前
Flutter for OpenHarmony 实战:Switch 开关按钮详解
flutter
奋斗的小青年!!14 小时前
OpenHarmony Flutter实战:打造高性能订单确认流程步骤条
flutter·harmonyos·鸿蒙
Coder_Boy_14 小时前
Flutter基础介绍-跨平台移动应用开发框架
spring boot·flutter