Flutter 踩坑记录: Expanded 会尽可能占据剩余空间,导致在滑动时超出 ListView 范围的部分也被渲染
·
旧版代码的奇怪问题当 listView 滑动的时候,滑出 listView的范围之后,按钮的 文本Perman 会立即消失,而背景色的图片 image: AssetImage("assets/pinkBtn.png")却没有消失,
而是再往上滑动到SizedBox(height: 10,),的区域结束之后才消失
这个现象可能是因为在 Column 内部,ListView.builder 是在一个 Expanded 中,而 Expanded 会尽可能占据剩余空间,导致在滑动时超出 ListView 范围的部分也被渲染。
为了解决这个问题,可以将 Column 包裹在一个 SingleChildScrollView 中,这样在滑动时超出 ListView 范围的部分将会被隐藏,而不会显示出来
通过将 Column 包裹在 SingleChildScrollView 中,并设置 ListView.builder 的 physics 属性为 NeverScrollableScrollPhysics(),可以禁用 ListView 的滑动,
然后通过 shrinkWrap 属性将 ListView 的高度适应内容,这样超出范围的部分将会被隐藏,不再显示。
Column(
children: [
SizedBox(height: 10,),
Expanded(
child: Container(
margin: EdgeInsets.symmetric(horizontal: 12),
child: ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return Container(
height: 160,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
flex: 3,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4),
image: DecorationImage(
image: AssetImage("assets/gameTest.png"),//活动的背景图片
fit: BoxFit.cover,
),
),
),
),
Expanded(
flex: 1,
child: Container(
alignment: Alignment.center,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
margin: EdgeInsets.only(left: 12),
child: Text(
"Agent joining activities",
style: TextStyle(
fontFamily: "Helvetica-Regular",
fontWeight: FontWeight.normal,
fontSize: 14,
color: Color(0xFF444444),
),
),
),
Container(
margin: EdgeInsets.only(right: 12),
child: InkWell(
onTap: () {
// 按钮点击事件
},
child: Ink(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/pinkBtn.png"),
fit: BoxFit.cover,
),
),
child: Container(
width: 54,
height: 20,
alignment: Alignment.center,
child: Text(
"Permanent",
style: TextStyle(
fontFamily: "Helvetica-Regular",
fontWeight: FontWeight.normal,
fontSize: 10,
color: Color(0xFFFFFFFF),
),
),
),
),
),
),
],
),
),
),
],
),
);
},
),
),
),
],
);更多推荐


所有评论(0)