Flutter滚动布局嵌套高度自适应和滑动冲突处理

Posted 2022-06-20 一叶飘舟

在SingleChildScrollView中嵌套ListView,如果不指定ListView高度的话会报错,类似这样的

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during paint():
RenderBox was not laid out: RenderViewport#a8f36 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1702 pos 12: 'hasSize'

解决方法有两种:

用有高度的布局(如Container)将ListView包裹,然后指定可滚动高度
 

Container(
            height: 80,
            child: ListView.builder(
        itemBuilder: (context, position) 
            return Center(child: Text(('111')));
        ,

设置ListView的shrinkWrap属性,用来控制ListView高度是否根据子组件决定,默认false,如果在滚动布局中嵌套ListView,设置为true,ListView将会全部展示.

SingleChildScrollView(
          child: ListView.builder(
        itemBuilder: (context, position) 
          return Center(child: Text(('111')));
        ,
        shrinkWrap: true,

滑动冲突问题,主要通过ListView的physics属性控制,主要值有：

RangeMaintainingScrollPhysics

适用于滚动过程中新增或减少数据

BouncingScrollPhysics

ios弹簧效果,如果数据没有充满ListView不会触发,如果需要可以,BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics())

ClampingScrollPhysics

android光波效果,滚动到底部出现光波

AlwaysScrollableScrollPhysics

始终触发滚动,即使数据没有充满ListView.过度滚动在Android上会触发滚动发光,在iOS上会触发弹簧效果

NeverScrollableScrollPhysics

禁用ListView的滚动