【Flutter】【widget】Scrollbar and CupertinoScrollbar 滚动条

widget名字：Scrollbar and CupertinoScrollbar

Scrollbar and CupertinoScrollbar

• Scrollbar 滚动条，android 风格
• CupertinoScrollbar 滚动条，IOS风格

---

功能：

功能：

1. 给 可滚动列表，添加一个滚动条的样式，

---

使用实例和代码：

import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
// import 'dart:js';

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

class MyApp extends StatelessWidget {
 const MyApp({super.key});

 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Flutter Demo',
     theme: ThemeData(
       // This is the theme of your application.
       //
       // Try running your application with "flutter run". You'll see the
       // application has a blue toolbar. Then, without quitting the app, try
       // changing the primarySwatch below to Colors.green and then invoke
       // "hot reload" (press "r" in the console where you ran "flutter run",
       // or simply save your changes to "hot reload" in a Flutter IDE).
       // Notice that the counter didn't reset back to zero; the application
       // is not restarted.
       primarySwatch: Colors.blue,
     ),
     home: const MyHomePage(title: 'Flutter Demo Home Page'),
   );
 }
}

class Car {
 const Car({
   required this.name,
   required this.imageUrl,
 });

 final String name;
 final String imageUrl;
}

class MyHomePage extends StatefulWidget {
 const MyHomePage({super.key, required this.title});

 final String title;
 @override
 State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 //模型数组,图片的地址
 final List<Car> datas = [
   const Car(
     name: '保时捷918 Spyder',
     imageUrl:
         'https://upload-images.jianshu.io/upload_images/2990730-7d8be6ebc4c7c95b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
   ),
   const Car(
     name: '兰博基尼Aventador',
     imageUrl:
         'https://upload-images.jianshu.io/upload_images/2990730-e3bfd824f30afaac?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
   ),
   const Car(
     name: '法拉利Enzo',
     imageUrl:
         'https://upload-images.jianshu.io/upload_images/2990730-a1d64cf5da2d9d99?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
   ),
   const Car(
     name: 'Zenvo ST1',
     imageUrl:
         'https://upload-images.jianshu.io/upload_images/2990730-bf883b46690f93ce?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
   ),
   const Car(
     name: '迈凯伦F1',
     imageUrl:
         'https://upload-images.jianshu.io/upload_images/2990730-5a7b5550a19b8342?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
   ),
   const Car(
     name: '萨林S7',
     imageUrl:
         'https://upload-images.jianshu.io/upload_images/2990730-2e128d18144ad5b8?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
   ),
   const Car(
     name: '科尼赛克CCR',
     imageUrl:
         'https://upload-images.jianshu.io/upload_images/2990730-01ced8f6f95219ec?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
   ),
   const Car(
     name: '布加迪Chiron',
     imageUrl:
         'https://upload-images.jianshu.io/upload_images/2990730-7fc8359eb61adac0?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
   ),
   const Car(
     name: '轩尼诗Venom GT',
     imageUrl:
         'https://upload-images.jianshu.io/upload_images/2990730-d332bf510d61bbc2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
   ),
   const Car(
     name: '西贝尔Tuatara',
     imageUrl:
         'https://upload-images.jianshu.io/upload_images/2990730-3dd9a70b25ae6bc9?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
   )
 ];
 late final ScrollController _scrollController;
 @override
 void initState() {
   // TODO: implement initState
   super.initState();
   _scrollController = ScrollController()..addListener(() {});
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
       // appBar: AppBar(
       //   title: Text(widget.title),
       // ),
       body: Scrollbar(
           controller: _scrollController, //需要controller ,不然异常
           child: ListView.builder(
               controller: _scrollController, //需要controller ,不然异常
               itemCount: datas.length,
               itemBuilder: (context, index) {
                 return Container(
                     key: ValueKey(index), //必须要有唯一的 不重复的key
                     decoration: const BoxDecoration(
                         color: Colors.transparent,
                         borderRadius: BorderRadius.all(Radius.circular(10))),
                     child: Card(
                       clipBehavior: Clip.antiAlias, //抗锯齿
                       // shape: RoundedRectangleBorder(
                       //     borderRadius: BorderRadius.circular(15)),//圆角，下面是图片无法实现圆角功能
                       elevation: 10,

                       child: Image.network(
                         datas[index].imageUrl,
                         loadingBuilder: (context, child, loadingProgress) {
                           if (loadingProgress == null) {
                             return child;
                           }
                           return const CupertinoActivityIndicator();
                         },
                         fit: BoxFit.contain,
                       ),
                     ));
               })));
 }
}

---

截图：