flutter Column 中包含ListView高度设置问题

 

Column(children: <Widget>[
  Text(“测试”),
 Container(
      width: ScreenUtil().setWidth(570),
//      height: ScreenUtil().setHeight(800),
      child: ListView.builder(
      scrollDirection: Axis.vertical,
       itemBuilder:
              (context,index){

        return _getListItem(index);
      },
        itemCount: list.length,

      ),
    ),
],)

以上代码中  height如果不设置 界面显示会有问题,如果要设置,又不能准确的计算出结果;下面有个方法可用解决这个问题,

Expanded在外层包裹就可用解决这个问题,如下
Column(children: <Widget>[
  Text(“测试”),
  Expanded(child:  Container(
      width: ScreenUtil().setWidth(570),
    child: ListView.builder(
      scrollDirection: Axis.vertical,
       itemBuilder:
              (context,index){

        return _getListItem(index);
      },
        itemCount: list.length,

      ),
    )),
],)

 

 

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
### 回答1: 在Flutter,可以使用Expanded组件包裹Text组件来实现文本自动换行并高度自适应。例如: ``` Column( children: <Widget>[ Expanded( child: Text( '这是一段文本,它会自动换行并高度自适应。', style: TextStyle(fontSize: 16), overflow: TextOverflow.ellipsis, maxLines: 3, ), ), ], ) ``` 可以在Text组件使用 overflow:TextOverflow.ellipsis 和 maxLines 属性来限制文本的行数 ### 回答2: 在Flutter,如果想要ListView的每一行都是一个Column,并且其的Text组件可以自动换行并且高度自适应,可以通过设置Text组件的最大宽度以及设置Text组件的softWrap和overflow属性来实现。 首先,可以将ListView的每一行设置为一个Column,并在每个Column添加一个Text组件。然后,为了使得Text组件可以自动换行,可以给Text组件设置一个最大宽度,例如使用MediaQuery.of(context).size.width * 0.8来设置Text组件的最大宽度为当前屏幕宽度的80%。这样,当Text组件的内容超过最大宽度时,Text组件会自动换行来适应。 其次,为了让Text组件的高度能够自适应,可以将Text组件的softWrap属性设置为true,表示允许Text组件换行,允许文本自动适应高度。同时,将Text组件的overflow属性设置为TextOverflow.clip,表示当文本超出显示范围时进行裁剪,保证Text组件的高度自适应。 综上所述,可以通过设置Text组件的最大宽度、softWrap和overflow属性来实现ListView每一行都是一个Column,并且其的Text组件可以自动换行并且高度自适应。注意,还可以根据具体需求设置Text组件的其他属性,如字体大小、字体样式等,以满足个性化的显示要求。 ### 回答3: 在Flutter,要使ListView每一行都是一个Column,并且其的Text能够自动换行并且高度自适应,可以采取以下步骤: 步骤一:创建一个ListView控件,作为整个列表的容器。 步骤二:在ListView.builder的itemBuilder回调函数,根据数据源构建每一行的内容。 ```dart ListView.builder( itemCount: dataList.length, itemBuilder: (BuildContext context, int index) { return Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ // 文本部分 Text( dataList[index]['content'], softWrap: true, // 设置Text可以自动换行 style: TextStyle( fontSize: 16.0, ), ), ], ); }, ) ``` 步骤三:在Column控件的Text控件设置softWrap属性为true,即可实现文本的自动换行。 除了上述设置,还可以根据需求进一步调整文本的样式。例如,可以通过设置Text控件的maxLines属性来限制文本的最大行数,或者设置Text控件的overflow属性来控制文本溢出时的显示情况。 需要注意的是,当ListView的内容比较多时,为了保证性能,建议使用ListView.builder来构建列表项,而不是直接使用ListView(children: [])方式。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值