如何防止小部件蜂鸣滚动?

时间:2020-10-22 17:01:39

标签: flutter

如何防止第一个窗口小部件(ListView)滚动?

想法是滚动SomeList,但最顶部的ListView小部件应保持不可滚动状态。

body: ListView(
        children: <Widget>[
          ListView(
            shrinkWrap: true,
            children: <Widget>[
              ListTile( // how to prevet this widget from beeing scrolled?
                title: Container(
                  height: 30,
                  child: Row(...),
                ),
              ),
            ],
          ),
          SomeList(), // builds ListView.separated( ...
        ],
      ),

已更新:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: 'Flutter Demo', home: MyListView());
  }
}

class MyListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('AppBar'),
      ),
      body: ListView(
        children: <Widget>[
          ListView(
            physics: const NeverScrollableScrollPhysics(),
            shrinkWrap: true,
            children: <Widget>[
              ListTile(
                title: Container(
                  height: 30,
                  color: Colors.black45,
                  child: Row(
                    children: const <Widget>[
                      Expanded(child: Text('Some header')),
                    ],
                  ),
                ),
              ),
            ],
          ),
          RapportList(),
        ],
      ),
    );
  }
}

class RapportList extends StatefulWidget {
  @override
  _RapportListState createState() => _RapportListState();
}

class _RapportListState extends State<RapportList> {
  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      physics: const ScrollPhysics(),
      shrinkWrap: true,
      itemCount: 100,
      itemBuilder: (context, index) {
        return ListTile(
          title: Row(
            children: <Widget>[
              Expanded(child: Text('$index')),
            ],
          ),
        );
      },
      separatorBuilder: (context, index) {
        return const Divider();
      },
    );
  }
}

2 个答案:

答案 0 :(得分:1)

解决方案是使用Expended小部件, 也使用physics: NeverScrollableScrollPhysics(),。这是完整的代码:

class MyListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('AppBar'),
      ),
      body: Container(
        height: MediaQuery.of(context).size.height,
        child: Column(
          children: <Widget>[
            Expanded(
              flex:1,
              child: ListView(
                physics: const NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                children: <Widget>[
                  ListTile(
                    title: Container(
                      height: 30,
                      color: Colors.black45,
                      child: Row(
                        children: const <Widget>[
                          Expanded(child: Text('Some header')),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Expanded(flex:9,child: RapportList()),
          ],
        ),
      ),
    );
  }
}

答案 1 :(得分:0)

在 Listview 中使用物理:const NeverScrollableScrollPhysics() 然后你可以防止你的小部件被滚动。