解決Flutter的ListView巢狀ListView滑動衝突以及無限高度問題

jethroHuang發表於2019-02-22

關鍵程式碼

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);
  }
}


複製程式碼

相關文章