始终显示滚动条 - Flutter

Question

我的文字很长，需要在用户进入我的页面时默认显示滚动条。

目前，在用户单击文本之前不会显示条形图，这是不好的行为，因为用户可能会在没有注意到有一些未读文本的情况下离开页面。

我的代码：

    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(15.0),
        child: Center(
          child: Column(
            children: <Widget>[
              Image.asset(
                "assets/images/logo.png",
                height: 200.0,
              ),
              SizedBox(
                height: 40,
              ),
              Expanded(
                child: Scrollbar(
                  child: SingleChildScrollView(
                    child: Text("Long Text Here ...",
                      textDirection: TextDirection.rtl,
                      style: TextStyle(fontSize: 17.2),
                    ),
                  ),
                ),
              ),
              SizedBox(
                height: 50,
              ),
              Row(
                children: <Widget>[
                  Expanded(
                    child: RaisedButton(
                      child: Text("Continue"),
                      onPressed: () {
                        MaterialPageRoute route = MaterialPageRoute(
                            builder: (BuildContext context) => MainPage());
                        Navigator.of(context).push(route);
                      },
                    ),
                  ),
                  SizedBox(
                    width: 20.0,
                  ),
                  RaisedButton(
                    child: Text("Close"),
                    onPressed: () {
                      exit(0);
                    },
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }```

Answer 1

从 Flutter 1.17 版开始，在 Scrollbar 上，您可以将 isAlwaysShown 设置为 true，但您必须为 Scrollbar 和 SingleChildScrollView 设置相同的 controller（这适用于任何其他可滚动的小部件）。

请记住，要使Scrollbar 可见，必须有足够的项目可以滚动。如果没有，Scrollbar 将不会显示。

完整的工作示例：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {  
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  final _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(15.0),
        child: Center(
          child: Column(
            children: <Widget>[
              // ...
              Expanded(
                child: Scrollbar(
                  controller: _scrollController, // <---- Here, the controller
                  isAlwaysShown: true, // <---- Required
                  child: SingleChildScrollView(
                    controller: _scrollController, // <---- Same as the Scrollbar controller
                    child: Text(
                      "Long Text Here ...",
                      textDirection: TextDirection.rtl,
                      style: TextStyle(fontSize: 17.2),
                    ),
                  ),
                ),
              ),
              // ...
            ],
          ),
        ),
      ),
    );
  }
}

Answer 2

使用draggable_scrollbar 包。它提供了一个可拖动的滚动条，带有使滚动条始终可见的选项。比如可以使用下面的代码

 DraggableScrollbar.arrows(
  alwaysVisibleScrollThumb: true, //use this to make scroll thumb always visible
  labelTextBuilder: (double offset) => Text("${offset ~/ 100}"),
  controller: myScrollController,
  child: ListView.builder(
    controller: myScrollController,
    itemCount: 1000,
    itemExtent: 100.0,
    itemBuilder: (context, index) {
      return Container(
        padding: EdgeInsets.all(8.0),
        child: Material(
          elevation: 4.0,
          borderRadius: BorderRadius.circular(4.0),
          color: Colors.purple[index % 9 * 100],
          child: Center(
            child: Text(index.toString()),
          ),
        ),
      );
    },
  ),
);

Answer 3

从 v2.9.0-1.0 开始，thumbVisiblity 是要设置的正确字段。

请注意，您可以使用 ScrollbarTheme 为您的应用（或某个子树）全局设置此设置：

    return MaterialApp(
    ...
      theme: ThemeData(
        ...
        scrollbarTheme: ScrollbarThemeData(
          thumbVisibility: MaterialStateProperty.all<bool>(true),
        )
      )
    )

这样的样式最好选择主题，所以避免做多次。

您仍然需要添加滚动条和控制器，如其他答案中所述。

Answer 4

您可以更改滚动条主题以设置标志 isAlwaysShown true

scrollbarTheme: const ScrollbarThemeData(isAlwaysShown: true)