文章目錄
一、Image 組件
二、TextField 組件
三、 相關資源
一、Image 組件
Image 組件有多個命名構造函數 , 可以從 文件 / 內存 / 網絡 / Assets 中加載文件 , 分別對應不同的構造函數 ;
class Image extends StatefulWidget { // 從網絡中加載圖片的構造函數 Image.network( // 圖片的網絡地址 String src, { Key key, double scale = 1.0, this.frameBuilder, this.loadingBuilder, this.errorBuilder, this.semanticLabel, this.excludeFromSemantics = false, this.width, // 組件寬度 this.height, // 組件高度 this.color, this.colorBlendMode, this.fit, this.alignment = Alignment.center, this.repeat = ImageRepeat.noRepeat, this.centerSlice, this.matchTextDirection = false, this.gaplessPlayback = false, this.filterQuality = FilterQuality.low, this.isAntiAlias = false, Map headers, int cacheWidth, int cacheHeight, }) : image = ResizeImage.resizeIfNeeded(cacheWidth, cacheHeight, NetworkImage(src, scale: scale, headers: headers)), assert(alignment != null), assert(repeat != null), assert(matchTextDirection != null), assert(cacheWidth == null || cacheWidth > 0), assert(cacheHeight == null || cacheHeight > 0), assert(isAntiAlias != null), super(key: key); // 從文件中加載圖片的構造函數 Image.file( File file, { Key key, double scale = 1.0, this.frameBuilder, this.errorBuilder, this.semanticLabel, this.excludeFromSemantics = false, this.width, this.height, this.color, this.colorBlendMode, this.fit, this.alignment = Alignment.center, this.repeat = ImageRepeat.noRepeat, this.centerSlice, this.matchTextDirection = false, this.gaplessPlayback = false, this.isAntiAlias = false, this.filterQuality = FilterQuality.low, int cacheWidth, int cacheHeight, }) : image = ResizeImage.resizeIfNeeded(cacheWidth, cacheHeight, FileImage(file, scale: scale)), loadingBuilder = null, assert(alignment != null), assert(repeat != null), assert(filterQuality != null), assert(matchTextDirection != null), assert(cacheWidth == null || cacheWidth > 0), assert(cacheHeight == null || cacheHeight > 0), assert(isAntiAlias != null), super(key: key); // 從 Assets 資源文件中加載圖片 Image.asset() // 從內存中加載圖片的構造函數 Image.memory() }
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
圖片組件使用示例 :
// 圖片組件 , 從網絡中加載一張圖片 Image.network( // 圖片地址 "https://img-blog.csdnimg.cn/20210228180808133.png", // 圖片寬度 width: 200, // 圖片高度 height: 200, ),
1
2
3
4
5
6
7
8
9
完整代碼示例 :
import 'package:flutter/material.dart'; class StatefulWidgetPage extends StatefulWidget { @override _StatefulWidgetPageState createState() => _StatefulWidgetPageState(); } class _StatefulWidgetPageState 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: 'StatefulWidgetPage 組件示例', theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( // 頂部標題欄 appBar: AppBar(title: Text('StatefulWidgetPage 組件示例'),), // 底部導航欄 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("主頁面選項卡, 下拉刷新"), // 圖片組件 , 從網絡中加載一張圖片 Image.network( // 圖片地址 "https://img-blog.csdnimg.cn/20210228180808133.png", // 圖片寬度 width: 200, // 圖片高度 height: 200, ), ], ), ), ], ), // 刷新時回調的方法 // 列表發生下拉操作時, 回調該方法 // 該回調是 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
運行效果展示 :
二、TextField 組件
TextField 組件構造函數的可選參數 : 下面代碼中的可選參數就是 TextField 組件可以設置的參數選項 ;
class TextField extends StatefulWidget { const TextField({ Key key, this.controller, this.focusNode, this.decoration = const InputDecoration(), TextInputType keyboardType, this.textInputAction, this.textCapitalization = TextCapitalization.none, this.style, this.strutStyle, this.textAlign = TextAlign.start, this.textAlignVertical, this.textDirection, this.readOnly = false, ToolbarOptions toolbarOptions, this.showCursor, this.autofocus = false, this.obscuringCharacter = '?', this.obscureText = false, this.autocorrect = true, SmartDashesType smartDashesType, SmartQuotesType smartQuotesType, this.enableSuggestions = true, this.maxLines = 1, this.minLines, this.expands = false, this.maxLength, this.maxLengthEnforced = true, this.onChanged, this.onEditingComplete, this.onSubmitted, this.onAppPrivateCommand, this.inputFormatters, this.enabled, this.cursorWidth = 2.0, this.cursorHeight, this.cursorRadius, this.cursorColor, this.selectionHeightStyle = ui.BoxHeightStyle.tight, this.selectionWidthStyle = ui.BoxWidthStyle.tight, this.keyboardAppearance, this.scrollPadding = const EdgeInsets.all(20.0), this.dragStartBehavior = DragStartBehavior.start, this.enableInteractiveSelection = true, this.onTap, this.mouseCursor, this.buildCounter, this.scrollController, this.scrollPhysics, this.autofillHints, this.restorationId, }) }
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
輸入框組件代碼示例 :
// 輸入框組件 TextField( // 設置輸入框樣式 decoration: InputDecoration( // 設置內容邊距, 左右邊距為 10, 上下邊距為 0 contentPadding: EdgeInsets.fromLTRB(10, 0, 10, 0), // 設置的提示文案信息 hintText: "提示信息", // 設置提示文案樣式 hintStyle: TextStyle(fontSize: 20, color: Colors.grey), ),
1
2
3
4
5
6
7
8
9
10
11
完整代碼示例 :
import 'package:flutter/material.dart'; class StatefulWidgetPage extends StatefulWidget { @override _StatefulWidgetPageState createState() => _StatefulWidgetPageState(); } class _StatefulWidgetPageState 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: 'StatefulWidgetPage 組件示例', theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( // 頂部標題欄 appBar: AppBar(title: Text('StatefulWidgetPage 組件示例'),), // 底部導航欄 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("主頁面選項卡, 下拉刷新"), // 圖片組件 , 從網絡中加載一張圖片 Image.network( // 圖片地址 "https://img-blog.csdnimg.cn/20210228180808133.png", // 圖片寬度 width: 200, // 圖片高度 height: 200, ), // 輸入框組件 TextField( // 設置輸入框樣式 decoration: InputDecoration( // 設置內容邊距, 左右邊距為 10, 上下邊距為 0 contentPadding: EdgeInsets.fromLTRB(10, 0, 10, 0), // 設置的提示文案信息 hintText: "提示信息", // 設置提示文案樣式 hintStyle: TextStyle(fontSize: 20, color: Colors.grey), ), ) ], ), ), ], ), // 刷新時回調的方法 // 列表發生下拉操作時, 回調該方法 // 該回調是 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
運行效果展示 :
三、 相關資源
參考資料 :
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/15500147 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )
Flutter Image
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
