文章目錄
一、PhysicalModel 組件
二、 完整代碼示例
三、 相關資源
一、PhysicalModel 組件
PhysicalModel 組件 : 可以將布局顯示成不同的形狀 ,
class PhysicalModel extends SingleChildRenderObjectWidget { const PhysicalModel({ Key key, this.shape = BoxShape.rectangle, // 形狀 : 圓形 , 矩形 this.clipBehavior = Clip.none, // 裁剪行為 this.borderRadius, // 圓角半徑 this.elevation = 0.0, @required this.color, // 顏色值 this.shadowColor = const Color(0xFF000000), // 背景顏色 Widget child, // 被裁減的組件 }) : assert(shape != null), assert(elevation != null && elevation >= 0.0), assert(color != null), assert(shadowColor != null), assert(clipBehavior != null), super(key: key, child: child); }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
PhysicalModel 組件用法 :
設置裁剪形狀 : 默認矩形 , 可以在 shape 字段設置圓形 ;
設置背景顏色 : color 字段設置背景顏色 , Color 類型 ;
設置圓角半徑 : borderRadius 字段設置 , BorderRadius 類型 ;
設置裁剪行為 : clipBehavior 字段設置裁剪行為 , Clip 枚舉類型 , 無/有鋸齒/抗鋸齒/抗鋸齒+保存圖層 ;
設置被裁剪的組件 : child 字段設置被裁減的組件 , Widget 類型 ;
PhysicalModel( color: 背景顏色 ( Color 類型 ), // 設置圓角半徑 15 borderRadius: 圓角半徑 ( BorderRadius 類型 ), // 設置裁剪行為 , 抗鋸齒 clipBehavior: Clip 枚舉類型 ( 無/有鋸齒/抗鋸齒/抗鋸齒+保存圖層 ), // 設置被裁剪的組件 child: 被裁剪的組件 ( Widget 類型 ), )
1
2
3
4
5
6
7
8
9
10
11
12
代碼示例 : PhysicalModel 組件裁剪 PageView 組件 , 將 PageView 組件裁剪成圓角矩形樣式 ;
PhysicalModel( color: Colors.transparent, // 設置圓角半徑 15 borderRadius: BorderRadius.circular(50), // 設置裁剪行為 , 抗鋸齒 clipBehavior: Clip.antiAlias, // 設置 PageView 組件 child: PageView( // 設置 PageView 中封裝的若干組件 children: [ // 第一個頁面組件 Container( // 設置居中方式 , 居中顯示 alignment:Alignment.center, // 設置裝飾器 , 綠色背景 decoration: BoxDecoration(color: Colors.green), // 顯示的主要文字 child: Text("頁面 0", style: TextStyle(fontSize: 20, color: Colors.black),), ), // 第二個頁面組件 Container( // 設置居中方式 , 居中顯示 alignment:Alignment.center, // 設置裝飾器 , 綠色背景 decoration: BoxDecoration(color: Colors.red), // 顯示的主要文字 child: Text("頁面 1", style: TextStyle(fontSize: 20, color: Colors.white),), ), // 第三個頁面組件 Container( // 設置居中方式 , 居中顯示 alignment:Alignment.center, // 設置裝飾器 , 綠色背景 decoration: BoxDecoration(color: Colors.black), // 顯示的主要文字 child: Text("頁面 2", style: TextStyle(fontSize: 20, color: Colors.yellow),), ), ], ), ),
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
二、 完整代碼示例
完整代碼示例 :
import 'package:flutter/material.dart'; class LayoutPage extends StatefulWidget { @override _LayoutPageState createState() => _LayoutPageState(); } class _LayoutPageState extends State { /// 當前被選中的底部導航欄索引 int _currentSelectedIndex = 0; // This widget is the root of your application. @override Widget build(BuildContext context) { // 文本組件樣式 , 可以設置給 Text 文本組件 // 設置字體大小 20, 顏色紅色 TextStyle textStyle = TextStyle(fontSize: 20, color: Colors.red); return MaterialApp( title: '布局組件示例', theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( // 頂部標題欄 appBar: AppBar(title: Text('布局組件示例'),), // 底部導航欄 BottomNavigationBar 設置 // items 可以設置多個 BottomNavigationBarItem bottomNavigationBar: BottomNavigationBar( // 設置當前選中的底部導航索引 currentIndex: _currentSelectedIndex, // 設置點擊底部導航欄的回調事件 , index 參數是點擊的索引值 onTap: (index){ // 回調 StatefulWidget 組件的 setState 設置狀態的方法 , 修改當前選中索引 // 之后 BottomNavigationBar 組件會自動更新當前選中的選項卡 setState(() { // 改變 int _currentSelectedIndex 變量的狀態 _currentSelectedIndex = index; }); }, // 條目 items: [ // 設置底部導航欄條目, 每個條目可以設置一個圖標 BottomNavigationBarItem( // 默認狀態下的圖標 icon: Icon(Icons.home, color: Colors.grey,), // 激活狀態下的圖標 activeIcon: Icon(Icons.home, color: Colors.red,), // 設置標題 title: Text("主頁") ), // 設置底部導航欄條目, 每個條目可以設置一個圖標 BottomNavigationBarItem( // 默認狀態下的圖標 icon: Icon(Icons.settings, color: Colors.grey,), // 激活狀態下的圖標 activeIcon: Icon(Icons.settings, color: Colors.red,), // 設置標題 title: Text("設置") ) ],), // 設置懸浮按鈕 floatingActionButton: FloatingActionButton( onPressed: (){ print("懸浮按鈕點擊"); }, child: Text("懸浮按鈕組件"), ), // Container 容器使用 body: _currentSelectedIndex == 0 ? // 刷新指示器組件 RefreshIndicator( // 顯示的內容 child: ListView( children: [ Container( // 對應底部導航欄設置選項卡 // 設置容器的裝飾器 , BoxDecoration 是最常用的裝飾器 // 可以自行查看 BoxDecoration 中可以設置的屬性 decoration: BoxDecoration(color: Colors.white), // 設置 child 子組件居中方式, 居中放置 alignment: Alignment.center, // 子組件, 子組件設置為一個 Column 組件 child: Column( // Column 子組件, 這里設置 Text 文本組件 children: [ Text("主頁面選項卡, 下拉刷新"), // 水平方向排列的線性布局 Row( children: [ // 原始圖片, 用于對比 Image.network("https://img-blog.csdnimg.cn/20210301145757946.png", width: 100, height: 100, ), // 圓形裁剪組件 , 將 child 布局裁剪成圓形 ClipOval( // 使用 SizedBox 組件約束布局大小 child: SizedBox( width: 100, height: 100, // 使用 SizedBox 約束該 Image 組件大小 child: Image.network("https://img-blog.csdnimg.cn/20210301145757946.png"), ), ), Padding( // 設置內邊距 5 padding: EdgeInsets.all(15), // 方形裁剪組件 , 將組件裁剪成方形 child: ClipRRect( // 設置裁剪圓角, 四個角設置半徑為 10 的圓角 borderRadius: BorderRadius.all(Radius.circular(10)), // 修改透明度組件 , 這里設置 50% 透明度 child: Opacity( opacity: 0.5, // 設置 100x100 大小的圖片組件 child: Image.network("https://img-blog.csdnimg.cn/20210301145757946.png", width: 100, height: 100, ), ), ), ), ], ), // 設置一個布局容器 , 用于封裝 PageView 組件 Container( // 設置高度 height: 200, // 設置邊距 margin: EdgeInsets.all(15), // 設置裝飾, 背景深橙色 decoration: BoxDecoration( color: Colors.white ), // 設置子組件 PageView 的裁剪組件 child: PhysicalModel(color: Colors.transparent, // 設置圓角半徑 15 borderRadius: BorderRadius.circular(50), // 設置裁剪行為 , 抗鋸齒 clipBehavior: Clip.antiAlias, // 設置 PageView 組件 child: PageView( // 設置 PageView 中封裝的若干組件 children: [ // 第一個頁面組件 Container( // 設置居中方式 , 居中顯示 alignment:Alignment.center, // 設置裝飾器 , 綠色背景 decoration: BoxDecoration(color: Colors.green), // 顯示的主要文字 child: Text("頁面 0", style: TextStyle(fontSize: 20, color: Colors.black),), ), // 第二個頁面組件 Container( // 設置居中方式 , 居中顯示 alignment:Alignment.center, // 設置裝飾器 , 綠色背景 decoration: BoxDecoration(color: Colors.red), // 顯示的主要文字 child: Text("頁面 1", style: TextStyle(fontSize: 20, color: Colors.white),), ), // 第三個頁面組件 Container( // 設置居中方式 , 居中顯示 alignment:Alignment.center, // 設置裝飾器 , 綠色背景 decoration: BoxDecoration(color: Colors.black), // 顯示的主要文字 child: Text("頁面 2", style: TextStyle(fontSize: 20, color: Colors.yellow),), ), ], ), ), ), ], ), ), ], ), // 刷新時回調的方法 // 列表發生下拉操作時, 回調該方法 // 該回調是 Future 類型的 onRefresh: _refreshIndicatorOnRefresh, ) : Container( // 對應底部導航欄設置選項卡 // 設置容器的裝飾器 , BoxDecoration 是最常用的裝飾器 // 可以自行查看 BoxDecoration 中可以設置的屬性 decoration: BoxDecoration(color: Colors.white), // 設置 child 子組件居中方式, 居中放置 alignment: Alignment.center, // 子組件, 子組件設置為一個 Column 組件 child: Column( // Column 子組件, 這里設置 Text 文本組件 children: [ Text("設置頁面選項卡") ], ), ) , // 該設置與 _currentSelectedIndex == 0? 相對應, ?: 三目運算符 ), ); } /// RefreshIndicator 發生下拉操作時, 回調該方法 /// 該方啊是一個異步方法 , 在方法體前添加 async 關鍵字 Future _refreshIndicatorOnRefresh() async{ // 暫停 500 ms , 使用 await 關鍵字實現 // 在這 500 ms 之間 , 列表處于刷新狀態 // 500 ms 之后 , 列表變為非刷新狀態 await Future.delayed(Duration(milliseconds: 500)); return null; } }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
運行效果展示 :
三、 相關資源
參考資料 :
flutter 官網 : https://flutter.dev/
Flutter 開發文檔 : https://flutter.cn/docs ( 強烈推薦 )
官方 GitHub 地址 : https://github.com/flutter
Flutter 中文社區 : https://flutter.cn/
Flutter 實用教程 : https://flutter.cn/docs/cookbook
Flutter CodeLab : https://codelabs.flutter-io.cn/
Dart 中文文檔 : https://dart.cn/
Dart 開發者官網 : https://api.dart.dev/
Flutter 中文網 ( 非官方 , 翻譯的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
Flutter 相關問題 : https://flutterchina.club/faq/ ( 入門階段推薦看一遍 )
博客源碼下載 :
GitHub 地址 : https://github.com/han1202012/flutter_cmd ( 隨博客進度一直更新 , 有可能沒有本博客的源碼 )
博客源碼快照 : https://download.csdn.net/download/han1202012/15484718 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )
Flutter 容器
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
