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版开始，您可以在my str @parts; @parts.push("foo") ... say @parts.join;上将Scrollbar设置为isAlwaysShown，但是必须为true和您的{ controller（并且也适用于任何其他可滚动小部件）。

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

完整的示例：

Scrollbar

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

始终显示滚动条-颤振

2 个答案: