Listview.Builder的Flutter滚动条

时间:2018-08-25 09:34:38

标签: android listview scrollbar flutter flutter-layout

我想在具有100张以上卡片的Listview.Builder无限列表上实现滚动条。但是,在运行以下代码时,滚动条不会随时出现。它总是不可见的。

我将Listview.Builder包装在滚动视图中,如下所示。

除了官方文档外,我在Flutter的滚动条上几乎看不到任何文档。 https://docs.flutter.io/flutter/material/Scrollbar-class.html

任何建议将不胜感激!

 .enableSassLoader((config) => { config.data = '$primary-color: green;' })

1 个答案:

答案 0 :(得分:0)

在滚动列表时,用ListView小部件包装Scrollbar应该显示一个滚动条,无论您是对ListView使用ListView.builder还是List<Widget>。已使用Flutter稳定频道1.22.4版进行验证

这是一个样本

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Scrollbar(
          child: ListView.builder(
            itemCount: 30,
            itemBuilder: (context, index) {
              return Card(
                child: Container(
                  padding: EdgeInsets.all(16.0),
                  child: Text('Item ${index + 1}'),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

Demo