class MySwitchListTileState extends State<MySwitchListTile> {
var isOpen=false;
@override
Widget build(BuildContext context) {
return new SwitchListTile(value: isOpen, onChanged: (bool){
setState(() {
isOpen=bool;
});
},
title:new Text(title),
subtitle: new Text("subTitle"),
activeColor:Colors.amber,
activeThumbImage:new AssetImage(images/zhubo01.jpg),
inactiveThumbImage: new AssetImage(images/zhubo02.jpeg),
secondary:new Container(
decoration: new BoxDecoration(
shape: BoxShape.circle,
border: new Border.all(color: Colors.amber,width: 1.5)
),
child: new CircleAvatar(
backgroundImage: new AssetImage(images/zhubo01.jpg),
),
),
);
}
}


四、RatingBar 評分控制項

Flutter沒有提供給我們這樣的控制項，就目前而言，我沒有找到，下面我們自己定義一個。

定義一個能夠滑動選擇評分,點擊星星評分的兩個操作,同時支持配置多個星星。

同時我們提供一個flag用作「列表」或「圖文」展示時候顯示的評分控制項,不走供手勢操作回調。如果你想實現自己特殊需求的評分控制項,我建議你自己弄吧。

先給懶人貼上github上評分控制項代碼鏈接地址：

TheMelody/FlutterRatingbar?

github.com

再看看實現的最終效果:

我們需要定義以下幾個參數來控制評分控制項:

1.默認展示的評分數值rating;2.星星數量starCount;

3.星星大小starSize;

4.星星選中的顏色color;5.添加一個回調方法,回調當前評分的數值;

進入正題，有了上面的介紹，我們先聲明一個回調方法:

///評分數值變化回調
typedef void RatingChangeCallback(double rating);


接下來定義一個StarRatingBarWidget有狀態的小部件:

///創建一個StarRatingBar Widget
class StarRatingBarWidget extends StatefulWidget {
final double rating;
final int starCount;
final double starSize;
final Color color;
final RatingChangeCallback onRatingCallback;

StarRatingBarWidget(
{Key key,
this.onRatingCallback,
this.rating = 0.0,
this.starCount,
this.starSize,
this.color});

@override
StarRatingBarState createState() {
return StarRatingBarState(
onRatingCallback: this.onRatingCallback,
rating: this.rating,
starCount: this.starCount,
starSize: this.starSize,
color: this.color);
}
}

再接下來，我們創建StarRatingBarState:

///創建一個 StarRatingBar State
class StarRatingBarState extends State<StarRatingBarWidget> {
double rating;
final int starCount;
final double starSize;
final Color color;
final RatingChangeCallback onRatingCallback;

StarRatingBarState(
{this.onRatingCallback,
this.rating,
this.starCount,
this.starSize,
this.color});

///通過滑動的距離來計算出當前評分數值
double getRatingValue(double dragDx) {
if (dragDx <= 0) return 0.0;
//評分控制項寬度
double totalWidth = starSize * starCount + 4;
//單個星星佔據的空間距離
double singleDistance = totalWidth / starCount + 2;
for (int i = 1; i <= starCount; i++) {
if (dragDx < singleDistance * i) {
if (dragDx < singleDistance * (i * 2 - 1) / 2) {
return (i * 2 - 1) / 2;
}
return i * 1.0;
}
}
return starCount * 1.0;
}

@override
Widget build(BuildContext context) {
void postInvalidateRatingValue(double rating) {
this.onRatingCallback(rating);
setState(() {
this.rating = rating;
});
}

return new GestureDetector(
//水平拖拽位置更新,注意:onRatingCallback此處做非空判斷,如果為空,則不處理水平滑動手勢
onHorizontalDragUpdate: onRatingCallback == null? null : (DragUpdateDetails details) {
RenderBox getBox = context.findRenderObject();
//details.globalPosition更新時顯示的全局位置Offset
//globalToLocal將全局坐標轉換為當前盒子內部的坐標
double dragDx = getBox.globalToLocal(details.globalPosition).dx;
print("當前控制項內部滑動距離:$dragDx");
postInvalidateRatingValue(getRatingValue(dragDx));
},
child: new StarRating(
rating: this.rating,
starCount: this.starCount,
starSize: this.starSize,
color: this.color,
//注意:此處也做onRatingCallback非空判斷,如果為空不做點擊操作響應
onRatingChanged: onRatingCallback == null ? null: (rating) => postInvalidateRatingValue(rating),
),
);
}
}

最後我們定義水平的星星列表，它是無狀態的,所以我們來實現下StartRating小部件：

///構建星星列表
class StarRating extends StatelessWidget {
final int starCount;
final double rating;
final double starSize;
final Color color;
final RatingChangeCallback onRatingChanged;

StarRating(
{@required this.starCount,
@required this.starSize,
this.rating,
this.onRatingChanged,
this.color});

Widget buildStar(BuildContext context, int index) {
Icon icon;
if (index >= rating) {
icon = new Icon(
Icons.star_border,
color: Theme.of(context).buttonColor,
size: starSize,
);
} else if (index > rating - 1 && index < rating) {
icon = new Icon(
Icons.star_half,
color: color ?? Theme.of(context).primaryColor,
size: starSize,
);
} else {
icon = new Icon(
Icons.star,
color: color ?? Theme.of(context).primaryColor,
size: starSize,
);
}
///如果你對水波紋有迷之熱愛,你可以用InkResponse/InkWell/IconButton等包裝即可
return new GestureDetector(
onTap:
onRatingChanged == null ? null : () => onRatingChanged(index + 1.0),
child: icon,
);
}

@override
Widget build(BuildContext context) {
//生成水平展示的星星列表
return new Row(
children:
new List.generate(starCount, (index) => buildStar(context, index)));
}
}

上面代碼全部貼完，我們看看如何調用？

//星星數量,大小,顏色,默認展示的評分數都可以指定
//如果onRatingCallback不寫,那麼評分控制項不響應滑動和點擊事件
new Container(
width: 200.0,
height: 50.0,
child: StarRatingBarWidget(
rating: 3.5,
starSize: 36.0,
starCount: 5,
color: Colors.amber,
onRatingCallback: (ratingValue) {
print(當前選了:$ratingValue分);
},
),
)


自定義評分控制項小結:

在做評分控制項的時候，手勢GestureDetector的onHorizontalDragUpdate回調參數DragUpdateDetails的globalPosition更新時顯示的全局位置Offset，我們不能直接使用它，而且評分的時候，滑動也是針對評分控制項內部做移動距離處理,所以我們需要轉換下我們的坐標位置。

我們先通過buildContext獲取RenderBox:

RenderBox getBox = buildContext.findRenderObject();


大家點擊BuildContext的源碼進去看看RenderObject注釋:

It should only be called from interaction event handlers (e.g.

gesture callbacks) or layout or paint callbacks.

我們需要使用RenderBox中的globalToLocal來轉換下坐標:

///將全局坐標的給定點轉換為此框的局部坐標系
Offset globalToLocal(Offset point, { RenderObject ancestor })


五、ProgressBar

在Flutter中進度條父類：ProgressIndicator，它有兩個子類

LinearProgressIndicator和CircularProgressIndicator 使用起來非常簡單

new LinearProgressIndicator()//水平進度載入圈
new CircularProgressIndicator()//圓形載入圈


我貼出來圓形圈圈效果,和android效果一致:

六、ScrollView

1.CustomScrollView

允許您直接提供[slivers]來創建各種滾動效果，例如列表、網格和展開頭。例如，要創建一個滾動視圖，其中包含一個擴展的應用程序欄，後面跟著一個列表和一個網格，可以使用一個由三個條組成的列表：[SliverAppBar]、[SliverList]和[SliverGrid]。

我直接貼出代碼，注釋基本上100%說明如何使用：

new CustomScrollView(
///slivers內:放置多個碎片，需要注意的是我們只能使用下面這三種:
///[SliverAppBar]， [SliverList]或[SliverFixedExtentList]，[SliverGrid]
///SliverAppBar:用於actionbar展示伸展縮放動畫
///SliverList或SliverFixedExtentList:展示列表數據的
///SliverGrid展示網格列表數據的
///
///SliverList和SliverFixedExtentList比較:
///如果子類在主軸上有固定的範圍，則考慮使用[SliverFixedExtentList]而不是[SliverList]
///因為[SliverFixedExtentList]不需要對其子類執行佈局就能在主軸上獲得它們的範圍區間大小，
///因此更有效率.
slivers: <Widget>[
///AppBar
new SliverAppBar(
//列表在滾動的時候appbar是否一直保持可見
pinned: true,
expandedHeight: 150.0,
//flexibleSpace高度和appbar高度一致
//FlexibleSpaceBar:一個靈活空間控制appbar擴展和伸縮
flexibleSpace: const FlexibleSpaceBar(
title: const Text(SliverAppBar),
//centerTitle值表示:appbar縮回去之後是否居中展示title
centerTitle: true,
//背景,final Widget background;
//我們要使用的Image對象必須是const聲明的常量對象,對象不可變
background: const Image(
image: const AssetImage("images/lake.jpg"),
fit: BoxFit.cover,
),
),
actions: <Widget>[
new IconButton(
icon: const Icon(
Icons.search,
color: Colors.white,
),
tooltip: Search,
onPressed: () {
/* search content */
},
),
]),

///SliverList或SliverFixedExtentList
new SliverFixedExtentList(
delegate: new SliverChildBuilderDelegate(
(BuildContext context, int index) {
//構建一個測試列表
return new Container(
alignment: Alignment.center,
color: Colors.blueGrey,
child: new Text(
SliverFixedExtentList,
textAlign: TextAlign.center,
),
);
},
childCount: 1,
),

///強制孩子在滾動方向上有指定的範圍
///指定itemExtent比讓孩子確定自己的範圍更有效率
itemExtent: 200.0),

///SliverGrid
new SliverGrid(
delegate: new SliverChildBuilderDelegate(
(BuildContext context, int index) {
///這裡實現自己的gridItem即可
return new Container(
alignment: Alignment.center,
color: Colors.teal[100 * (index % 9)],
child: new Text(grid item $index),
);
},
childCount: 18,
),

///委託item都是最大範圍
gridDelegate: new SliverGridDelegateWithMaxCrossAxisExtent(
//均勻劃分網格範圍,範圍最多為maxCrossAxisExtent的值
//example:如果網格是垂直的，網格為500.0像素寬，
//並且[maxCrossAxisExtent]為150.0（將要劃分的網格範圍最多不超過150）
//此委託將創建一個網格，其中4列寬為125.0像素。
maxCrossAxisExtent: 180.0,
//主軸,橫向,item之間的間距
mainAxisSpacing: 1.0,
//縱軸,item之間的間距
crossAxisSpacing: 4.0,
//寬/高的比例
childAspectRatio: 1.0,
)),
],
)

代碼光看是不行的，你們得跟著我的代碼「敲」！然後在敲的過程中進行自己的理解。

2.SingleChildScrollView 可以讓單個小部件進行滾動，和android中的ScrollView功能一樣

3.NestedScrollView

NestedScrollView和CustomScrollView相同點都是可以創建滾動視圖；

不同點是它可以創建一個[SliverAppBar]+[TabBar]組合的頭部,body體中通常使用[TabBarView],body體中默認使用[PrimaryScrollController]控制器。

先實現一個不含Tab欄的（盡在注釋中解釋）：

WTF，文章內容字數太多，提示我字數限制，那麼我們轉戰下一篇文章繼續！

推薦閱讀：