解决Flutter的ListView嵌套ListView滑动冲突以及无限高度问题
程序员文章站
2022-06-17 18:54:21
...
关键代码
shrinkWrap: true, //解决无限高度问题
physics:NeverScrollableScrollPhysics(),//禁用滑动事件
可滑动控件都有这两个属性,给子滑动部件设置上这两个参数,即可办到子ListView跟随父ListView滑动。
demo 代码
import 'package:flutter/material.dart';
class BossMainActivity extends StatefulWidget {
@override
_BossMainActivityState createState() => _BossMainActivityState();
}
class _BossMainActivityState extends State<BossMainActivity> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
shrinkWrap: true,
children: <Widget>[
Column(
children: <Widget>[
Container(
height: 50.0,
color: Colors.blue,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 10.0),
child: Icon(
Icons.arrow_back,
color: Colors.white,
size: 25.0,
),
),
Text(
"进销存",
style: TextStyle(color: Colors.white, fontSize: 18.0),
),
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.add,
color: Colors.white,
size: 25.0,
),
),
],
),
),
],
),
Row(
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 10.0),
child: Icon(
Icons.shop,
color: Colors.orange,
),
),
Text(
"选择店铺",
style: TextStyle(color: Colors.black, fontSize: 17.0),
),
],
),
ListView.separated( // ***listview 嵌套listview 出现部件颤动。使用listview.separated 关键代码 shrinkWrap = true physics:*** NeverScrollableScrollPhysics(),
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemBuilder: (BuildContext context, int index) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 10.0, right: 20.0),
child: Text("店铺$index"),
),
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Icon(Icons.arrow_forward),
),
],
);
},
separatorBuilder: (context, index) => Divider(
color: Colors.red,
),
itemCount: 5),
],
));
}
}