添加滚动条示例

Author: xuelong

example/assets/locale/i18n_en.json

@@ -41,6 +41,8 @@
   "secondFloor": "Second floor",
   "secondFloorDescribe": "Imitate the second floor of Taobao",
   "welcomeToSecondFloor": "Welcome to second floor",
+  "scrollBar": "ScrollBar",
+  "scrollBarDescribe": "Add a scroll bar to the list",
   "qqGroup": "QQ group",
   "github": "Github",
   "name": "Name",

example/assets/locale/i18n_zh.json

@@ -41,6 +41,8 @@
   "secondFloor": "二楼",
   "secondFloorDescribe": "模仿淘宝二楼",
   "welcomeToSecondFloor": "欢迎光临二楼",
+  "scrollBar": "滚动条",
+  "scrollBarDescribe": "为列表添加滚动条",
   "qqGroup": "QQ群",
   "github": "Github",
   "name": "名字",

example/lib/page/sample/scrollbar_page.dart

@@ -0,0 +1,95 @@
+import 'dart:async';
+
+import 'package:example/generated/translations.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_easyrefresh/easy_refresh.dart';
+
+/// 滚动条页面
+class ScrollBarPage extends StatefulWidget {
+  @override
+  _ScrollBarPageState createState() => _ScrollBarPageState();
+}
+
+class _ScrollBarPageState extends State<ScrollBarPage> {
+  List<String> addStr = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
+  List<String> str = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
+  GlobalKey<EasyRefreshState> _easyRefreshKey =
+  new GlobalKey<EasyRefreshState>();
+  GlobalKey<RefreshHeaderState> _headerKey =
+  new GlobalKey<RefreshHeaderState>();
+  GlobalKey<RefreshFooterState> _footerKey =
+  new GlobalKey<RefreshFooterState>();
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(Translations.of(context).text("scrollBar")),
+      ),
+      body: Center(
+          child: new EasyRefresh(
+            key: _easyRefreshKey,
+            builder: (context, child, scrollController){
+              return Scrollbar(child: child);
+            },
+            refreshHeader: ClassicsHeader(
+              key: _headerKey,
+              refreshText: Translations.of(context).text("pullToRefresh"),
+              refreshReadyText: Translations.of(context).text("releaseToRefresh"),
+              refreshingText: Translations.of(context).text("refreshing") + "...",
+              refreshedText: Translations.of(context).text("refreshed"),
+              moreInfo: Translations.of(context).text("updateAt"),
+              bgColor: Colors.transparent,
+              textColor: Colors.black87,
+              moreInfoColor: Colors.black54,
+              showMore: true,
+            ),
+            refreshFooter: ClassicsFooter(
+              key: _footerKey,
+              loadText: Translations.of(context).text("pushToLoad"),
+              loadReadyText: Translations.of(context).text("releaseToLoad"),
+              loadingText: Translations.of(context).text("loading"),
+              loadedText: Translations.of(context).text("loaded"),
+              noMoreText: Translations.of(context).text("noMore"),
+              moreInfo: Translations.of(context).text("updateAt"),
+              bgColor: Colors.transparent,
+              textColor: Colors.black87,
+              moreInfoColor: Colors.black54,
+              showMore: true,
+            ),
+            child: new ListView.builder(
+              //ListView的Item
+                itemCount: str.length,
+                itemBuilder: (BuildContext context, int index) {
+                  return new Container(
+                      height: 70.0,
+                      child: Card(
+                        child: new Center(
+                          child: new Text(
+                            str[index],
+                            style: new TextStyle(fontSize: 18.0),
+                          ),
+                        ),
+                      ));
+                }),
+            onRefresh: () async {
+              await new Future.delayed(const Duration(seconds: 1), () {
+                setState(() {
+                  str.clear();
+                  str.addAll(addStr);
+                });
+              });
+            },
+            loadMore: () async {
+              await new Future.delayed(const Duration(seconds: 1), () {
+                if (str.length < 20) {
+                  setState(() {
+                    str.addAll(addStr);
+                  });
+                }
+              });
+            },
+          )),
+    );
+  }
+}

example/lib/page/sample/second_floor_page.dart

@@ -166,7 +166,6 @@ class _SecondFloorPageState extends State<SecondFloorPage>
                         child: Center(
                             child: Icon(
                           Icons.keyboard_arrow_up,
-                          size: 36.0,
                           color: Colors.white,
                         )),
                       )

example/lib/page/sample_page.dart

@@ -8,6 +8,7 @@ import 'package:example/page/sample/float_page.dart';
 import 'package:example/page/sample/list_embed_page.dart';
 import 'package:example/page/sample/manual_control_page.dart';
 import 'package:example/page/sample/nested_scroll_view_page.dart';
+import 'package:example/page/sample/scrollbar_page.dart';
 import 'package:example/page/sample/second_floor_page.dart';
 import 'package:example/page/sample/sliver_page.dart';
 import 'package:example/page/sample/swiper_page.dart';
@@ -338,6 +339,28 @@ class _SamplePageState extends State<SamplePage>
                 color: Colors.orange,
               ),
             ),
+            Container(
+              width: double.infinity,
+              height: 0.5,
+              padding: EdgeInsets.only(left: 5.0, right: 5.0),
+              child: Container(
+                color: Colors.black12,
+              ),
+            ),
+            ListItem(
+              title: Translations.of(context).text("scrollBar"),
+              describe: Translations.of(context).text("scrollBarDescribe"),
+              onPressed: () {
+                Navigator.push(context,
+                    MaterialPageRoute(builder: (BuildContext context) {
+                      return ScrollBarPage();
+                    }));
+              },
+              icon: Icon(
+                Icons.border_right,
+                color: Colors.orange,
+              ),
+            ),
           ],
         ),
       ),