[Flutter]flutter基础之组件基础(十八)

Posted 2021-04-29 MW技术栈

一、ProgressIndicator Widget

ProgressIndicator 是进度指示器的抽象基类，不能直接被实例化。构造方法如下：

const ProgressIndicator({ Key key, //double类型可选命名参数，如果不为空，则此进度指示器的值 this.value, //Color类型可选命名参数，进度指示器的背景色 this.backgroundColor, //Animation<Color>类型可选命名参数，使用动画值作为进度指示器的进度颜色 this.valueColor, //String类型可选命名参数，此进度指示器的Semantics.label this.semanticsLabel, //String类型可选命名参数，此进度指示器的Semantics.value this.semanticsValue,})

自身其有两个实现类，分别为：LinearProgressIndicator 、CircularProgressIndicator ，当然也可以自定义。

1. LinearProgressIndicator Widget

LinearProgressIndicator 是一个线性进度指示器 Widget ，也就是一个进度条。构造方法如下：

const LinearProgressIndicator({ Key key, //double类型可选命名参数，如果不为空，则此进度指示器的值 double value, //Color类型可选命名参数，进度指示器的背景色 Color backgroundColor, //Animation<Color>类型可选命名参数，进度指示器的颜色作为动画值 Animation<Color> valueColor, //String类型可选命名参数，此进度指示器的Semantics.label String semanticsLabel, //String类型可选命名参数，此进度指示器的Semantics.value String semanticsValue,})

LinearProgressIndicator 可以由两种表现形式。当 value 为 null 时，进度条是一个线性的循环模式，表示正在加载，但是不能确定已完成和未完成的比例。当 value 不为空时，可设置 0.0 到 1.0 之间的非空值，不能值表示不同的加载进度。

valueColor 是 Animation<Color> 类型，是一个动画类，当不需要使用动画，将进度值设置为固定颜色时，可以使用 AlwaysStoppedAnimation<Color>(color) ，AlwaysStoppedAnimation 也是动画的一个实现类，表示一个固定的值。后续文章的动画部分会做详细讲解。

LinearProgressIndicator 使用如下：

import 'package:flutter/material.dart';import 'package:flutter/cupertino.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: MyHomePage(), ); }}
class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState();}
class _MyHomePageState extends State<MyHomePage> { double currentValue = 0.3; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( backgroundColor: Colors.blue, title: Text("HomePage"), ), body:Center( child: Container( width: 200, height: 10, child: LinearProgressIndicator( //LinearProgressIndicator value: currentValue, backgroundColor: Colors.grey, valueColor: AlwaysStoppedAnimation(Colors.red), ), ), ), ); }}

效果如下(上为 value 为 null 效果，下为非 null 效果)：

2. CircularProgressIndicator Widget

CircularProgressIndicator 是循环进度指示器，是使用圆圈显示进度的 Widget 。使用方法与上述的线性进度指示器相同，其构造方法如下：

const CircularProgressIndicator({ Key key, //double类型可选命名参数，如果不为空，则此进度指示器的值 double value, //Color类型可选命名参数，进度指示器的背景色 Color backgroundColor, //Animation<Color>类型可选命名参数，使用动画值作为进度指示器的进度颜色 Animation<Color> valueColor, //double类型可选命名参数，用于画圆的线的宽度 this.strokeWidth = 4.0, //String类型可选命名参数，此进度指示器的Semantics.label String semanticsLabel, //String类型可选命名参数，此进度指示器的Semantics.value String semanticsValue,})

使用如下：

class _MyHomePageState extends State<MyHomePage> { double currentValue = 0.3; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( backgroundColor: Colors.blue, title: Text("HomePage"), ), body:Center( child: Container( width: 300, height: 300, child: CircularProgressIndicator( value: currentValue, strokeWidth: 10, backgroundColor: Colors.grey, valueColor: AlwaysStoppedAnimation(Colors.red), ), ), ), ); }}

效果如下：

二、RefreshIndicator Widget

RefreshIndicator 是 Material 风格的滑动刷新 Widget ，效果是下拉刷新。当滑动距离超过设置的滑动距离后，一个动态循环指示器会淡入视图。当 Scrollable 没有足够的内容来进行滚动操作时，可将其 physics 属性设置为 AlwaysScrollableScrollPhysics 。使用 AlwaysScrollableScrollPhysics 将确保滚动视图始终可滚动，因此可以触发 RefreshIndicator 。RefreshIndicator 只能与垂直滚动视图一起使用。

构造方法如下：

const RefreshIndicator({ Key key, //Widget类型必传参数，要显示的Widget，通常为ListView或CustomScrollView @required this.child, //double类型可选命名参数，从子Widget的顶部或底部边缘到刷新指示符所在位置的距离 //在公开刷新指示器的拖动过程中，其实际位移可能会大大超过此值。 this.displacement = 40.0, //RefreshCallback类型必传参数，当用户将刷新指示器拖到足够远以表明他们希望应用刷新时调用的函数。 //刷新操作完成后，返回的Future必须完成 @required this.onRefresh, //Color类型可选命名参数，进度指示器前景色。默认情况下，当前主题ThemeData.accent颜色 this.color, //Color类型可选命名参数，进度指示器背景色。默认情况下，当前主题ThemeData.canvas颜色。 this.backgroundColor, //ScrollNotificationPredicate类型可选命名参数，一个检查，指定此窗口小部件是否应 //处理ScrollNotification this.notificationPredicate = defaultScrollNotificationPredicate, //String类型可选命名参数，此进度指示器的Semantics.label this.semanticsLabel, //String类型可选命名参数，此进度指示器的Semantics.value this.semanticsValue,})

onRefresh 是 RefreshCallback 类型，是一个返回值为 Future<void> 类型的方法，定义为：Future<void> Function(); 。这个方法当用户拖动一个刷新指示器足够远以显示他们希望应用程序刷新时调用。

下拉刷新使用如下：

class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( backgroundColor: Colors.blue, title: Text("HomePage"), ), body:Center( child: Container( child: RefreshIndicator( child: ListView( scrollDirection: Axis.vertical,  padding: EdgeInsets.all(10),  itemExtent: 200,  children: <Widget>[ Container( color: Colors.lightBlueAccent, height: 120, width: 160, child: const Center(child: Text("Text 1"),), ), Container( color: Colors.yellow, height: 120, width: 160, child: const Center(child: Text("Text 2"),), ), Container( color: Colors.red, height: 120, width: 160, child: const Center(child: Text("Text 3"),), ), ], ), onRefresh: (){ return Future.delayed(Duration(seconds: 2)); }, ), ), ), ); }}

效果如下：

在实例开发中，下拉刷新经常与上拉加载更多一起使用。实现加载更多，可以通过使用 ScrollController 监听视图滚动来实现。ScrollController 在后续文章会详细说明。

实现如下：

class _MyHomePageState extends State<MyHomePage> { ScrollController _scrollController; List<String> _dataList = List(); int _pageIndex = 1; bool _isLoadingFinished = true;
 @override void initState() { super.initState(); _getInitData(); _scrollController = ScrollController() ..addListener((){ //添加监听 if(_scrollController.position.pixels == _scrollController.position.maxScrollExtent) { _getMoreData(); } }); }
 //初始化第一页数据 Future _getInitData() async { _pageIndex = 1; _dataList.removeRange(0, _dataList.length); await Future.delayed(Duration(seconds: 1),(){ setState(() { _dataList = List.generate(10, (int i){return "获取的数据列表数据 $i";});
 }); }); }
 //获取更多数据 Future _getMoreData() async { if(_isLoadingFinished) { _isLoadingFinished = false; await Future.delayed(Duration(seconds: 1), (){ setState(() { _dataList.addAll(List.generate(5, (int i){ return "这是新的数据 $i"; })); _isLoadingFinished = true; }); }); } }
 @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( backgroundColor: Colors.blue, title: Text("HomePage"), ), body:Center( child: Container( child: RefreshIndicator( child: ListView.builder( controller: _scrollController, scrollDirection: Axis.vertical, padding: EdgeInsets.all(10), itemExtent: 100, itemBuilder: _renderListRow, itemCount: _dataList.length == 0 ? _dataList.length : _dataList.length+1, ), onRefresh: (){ return _getInitData(); }, ), ), ), ); }
 //渲染加载数据 Widget _renderListRow(BuildContext context, int index) { if(index < _dataList.length){ return Container( height: 100, child: Text(_dataList[index] ), ); } return Center( child: Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text("加载更多", style: TextStyle(fontSize: 20),), Container( width: 15, height: 15, margin: EdgeInsets.only(left: 10), child: CircularProgressIndicator(strokeWidth: 2,), ), ], ), ); }}

效果如下：

三、RefreshProgressIndicator Widget

RefreshProgressIndicator 是用于显示刷新小部件内容的进度指示器，其继承自 CircularProgressIndicator 。通常用于与刷新相关的进度显示。其默认样式与 RefreshIndicator 下拉后显示的圆形指示器相同。构造方法如下：

const RefreshProgressIndicator({ Key key, //double类型可选命名参数，进度指示器的值 double value, //Color类型可选命名参数，背景色 Color backgroundColor, //Animation<Color>类型可选命名参数，使用动画值作为进度指示器的进度颜色 Animation<Color> valueColor, //double类型可选命名参数，用于画圆的线的宽度 double strokeWidth = 2.0, // Different default than CircularProgressIndicator. //String类型可选命名参数，此进度指示器的Semantics.label String semanticsLabel, //String类型可选命名参数，此进度指示器的Semantics.value String semanticsValue,})

使用如下：

class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( backgroundColor: Colors.blue, title: Text("HomePage"), ), body:Center( child: Container( height: 300, width: 300, child: RefreshProgressIndicator( value: 0.3, strokeWidth: 10, backgroundColor: Colors.yellow, valueColor: AlwaysStoppedAnimation<Color>(Colors.red), ), ), ), ); }}

效果如下：

四、ListWheelScrollView Widget

ListWheelScrollView 是一个可滚动的轮子式的 Widget ，子级的渲染就像在轮子上旋转而不是在平面上滚动一样。与 ListView 类似，但其所有子 Widget 在滚动轴上必须具有相同的大小。当列表的滚动偏移量为 0 时，第一个子 Widget 与视口中间对齐。当列表位于最终滚动偏移处时，最后一个子 Widget 与视口的中间对齐。

构造方法如下：

//创建一个ListWheelScrollView，它的子级被传递给委托人，并在布局期间延迟构建ListWheelScrollView({ Key key, //ScrollController类型可选命名参数，控制器，通常使用FixedExtentScrollController来控制当前项目 this.controller, //ScrollPhysics类型可选命名参数，滚动视图应如何响应用户输入 this.physics, //double类型可选命名参数，圆柱体直径与主轴上视口大小之间的比率 this.diameterRatio = RenderListWheelViewport.defaultDiameterRatio, //double类型可选命名参数，圆柱投影的透视图 this.perspective = RenderListWheelViewport.defaultPerspective, //double类型可选命名参数，轮子水平偏离中心的程度，即为其宽度的一小部分。这一属性创造了一种视觉效果， //从它的侧面看一个垂直的轮子，它的消失点在边缘曲线的一边，而不是正面看轮子 this.offAxisFraction = 0.0, //bool类型可选命名参数，是否将放大镜用于轮子的中心项目 this.useMagnifier = false, //bool类型可选命名参数，如果使用了放大镜，则放大率 this.magnification = 1.0, //double类型必传参数，主轴上每个子项的大小。不能为null，并且必须为正 @required this.itemExtent, //double类型可选命名参数，轮子上子Widget的角度紧凑度 this.squeeze = 1.0, //ValueChanged<int>类型可选命名参数，在中心项更改时调用的可选侦听器上 this.onSelectedItemChanged, //bool类型可选命名参数，是否将绘制的子项剪辑到此视口的内部 this.clipToSize = true, //bool类型可选命名参数，是否仅在视口内绘制子代.如果clipToSize也为true，则不能为true， //因为视口外部的子代将被裁剪，因此无法在视口之外呈现子代。 this.renderChildrenOutsideViewport = false, //List<Widget>类型必传参数，子Widget列表 @required List<Widget> children,})
//创建一个ListWheelScrollView，它的子级由一名代表管理，并且在布局过程中延迟构建const ListWheelScrollView.useDelegate({ Key key, //ScrollController类型可选命名参数，控制器，通常使用FixedExtentScrollController来控制当前项目 this.controller, //ScrollPhysics类型可选命名参数，滚动视图应如何响应用户输入 this.physics, //double类型可选命名参数，圆柱体直径与主轴上视口大小之间的比率 this.diameterRatio = RenderListWheelViewport.defaultDiameterRatio, //double类型可选命名参数，圆柱投影的透视图 this.perspective = RenderListWheelViewport.defaultPerspective, //double类型可选命名参数，轮子水平偏离中心的程度，即为其宽度的一小部分。这一属性创造了一种视觉效果， //从它的侧面看一个垂直的轮子，它的消失点在边缘曲线的一边，而不是正面看轮子 this.offAxisFraction = 0.0, //bool类型可选命名参数，是否将放大镜用于轮子的中心项目 this.useMagnifier = false, //bool类型可选命名参数，如果使用了放大镜，则放大率 this.magnification = 1.0, //double类型必传参数，主轴上每个子项的大小。不能为null，并且必须为正 @required this.itemExtent, //double类型可选命名参数，轮子上子Widget的角度紧凑度，每个item的距离 this.squeeze = 1.0, //ValueChanged<int>类型可选命名参数，在中心项更改时调用的可选侦听器上，是一个回调方法 this.onSelectedItemChanged, //bool类型可选命名参数，是否将绘制的子项剪辑到此视口的内部 this.clipToSize = true, //bool类型可选命名参数，是否仅在视口内绘制子代 this.renderChildrenOutsideViewport = false, //ListWheelChildDelegate类型必传参数，惰性代理 @required this.childDelegate,}) 

其中 onSelectedItemChanged 是 ValueChanged<int> 类型，是一个无返回值的方法，定义为：void Function(T value);

childDelegate 是 ListWheelChildDelegate 类型，为 ListWheelScrollView 提供子级的委托。 ListWheelScrollView 在布局期间懒惰地构造其子级，以避免创建比通过视口可见的子级更多的子级。该委托负责在此阶段为 ListWheelScrollView 提供子级。ListWheelChildDelegate 是一个抽象类，提供了两个子类可以使用：ListWheelChildBuilderDelegate 和 ListWheelChildLoopingListDelegate 。

ListWheelChildBuilderDelegate 使用构建器回调为 ListWheelScrollView 提供子级的委托。其惰性地构造其子级，以避免创建的子级超过通过视口可见的子级。该委托使用 IndexedWidgetBuilder 回调提供子项，因此不必在显示子项之前对其进行构建。构造方法如下：

ListWheelChildBuilderDelegate({ //IndexedWidgetBuilder类型必传参数，惰性创建子Widget @required this.builder, //int类型可选命名参数，如果非null，则childCount是可提供的最大子代数，并且子代的可用 //范围是0到childCount-1 this.childCount,})

builder 是 IndexedWidgetBuilder 类型，是一个返回值为 Widget 的方法，定义为：Widget Function(BuildContext context, int index); 。

ListWheelChildLoopingListDelegate 是通过循环显示列表的 ListWheelScrollView 委托。此类适用于子项列表已知的情况。构造方法如下：

ListWheelChildLoopingListDelegate({ //List<Widget>类型必传参数，该列表包含可以提供的所有子Widget @required this.children})

ListWheelScrollView 使用如下：

class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( backgroundColor: Colors.blue, title: Text("HomePage"), ), body:Center( child: Container( height: 300, color: Colors.yellow, child: ListWheelScrollView( itemExtent: 100, onSelectedItemChanged: (int value){ print(value); }, children: <Widget>[ Container( color: Colors.red, height: 120, width: 160, child: const Center(child: Text("Text 1"),), ), Container( color: Colors.red, height: 120, width: 160, child: const Center(child: Text("Text 2"),), ), Container( color: Colors.red, height: 120, width: 160, child: const Center(child: Text("Text 3"),), ), Container( color: Colors.red, height: 120, width: 160, child: const Center(child: Text("Text 4"),), ), ], ), ), ), ); }}

效果如下：

ListWheelScrollView.useDelegate 使用 ListWheelChildBuilderDelegate 如下：

class _MyHomePageState extends State<MyHomePage> { List _itemList = ["Text 1", "Text2", "Text3", "Text4"]; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( backgroundColor: Colors.blue, title: Text("HomePage"), ), body:Container( height: 300, color: Colors.yellow, child: ListWheelScrollView.useDelegate ( itemExtent: 100, onSelectedItemChanged: (int value){ print(value); }, childDelegate: ListWheelChildBuilderDelegate( builder: (BuildContext context, int index) { return Container( color: Colors.red, height: 120, width: 160, child: Center(child: Text("${_itemList[index]}", style: TextStyle(fontSize: 30),)), ); }, childCount: _itemList.length, ), ), ), ); }}

效果如下：

ListWheelScrollView.useDelegate 使用 ListWheelChildBuilderDelegate 如下：

class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( backgroundColor: Colors.blue, title: Text("HomePage"), ), body:Container( height: 300, color: Colors.yellow, child: ListWheelScrollView.useDelegate ( itemExtent: 100, onSelectedItemChanged: (int value){ print(value); }, childDelegate: ListWheelChildLoopingListDelegate( children: [ Container( color: Colors.red, height: 120, width: 160, child: Center(child: Text("Text1", style: TextStyle(fontSize: 30),)), ), Container( color: Colors.red, height: 120, width: 160, child: Center(child: Text("Text2", style: TextStyle(fontSize: 30),)), ), ], ), ), ), ); }}

效果如下：