解决Flutter的ListView嵌套ListView滑动冲突以及无限高度问题

10,700 阅读1分钟

关键代码

shrinkWrap: true, //解决无限高度问题
physics:NeverScrollableScrollPhysics(),//禁用滑动事件

可滑动控件都有这两个属性,给子滑动部件设置上这两个参数,即可办到子ListView跟随父ListView滑动。

demo代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'list嵌套',
      home: Scaffold(
          appBar: AppBar(
            title: Text('滚动嵌套'),
          ),
          body: ListView(
            children: <Widget>[
              ListList(10,Colors.deepPurpleAccent),
              ListList(20,Colors.red),
            ],
          )),
    );
  }
}


class ListList extends StatelessWidget {
  int length = 0; //列表长度
  Color color;//文字颜色

  ListList(this.length, this.color);

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      shrinkWrap: true,
      physics:NeverScrollableScrollPhysics(),
        itemBuilder: (context, index) => Text(
              'item. $index',
              style: TextStyle(color: color),
            ),
        separatorBuilder: (context, index) => Divider(
              color: color,
            ),
        itemCount: length);
  }
}