【Flutter】Flutter 布局組件 ( Opacity 組件 | ClipRRect 組件 | Padding 組件 )

文章目錄

一、Opacity 組件

二、ClipRRect 組件

三、Padding 組件

四、完整代碼示例

五、相關資源

一、Opacity 組件

Opacity 組件 : 用于修改組件透明度 ;

class Opacity extends SingleChildRenderObjectWidget { const Opacity({ Key key, @required this.opacity, this.alwaysIncludeSemantics = false, Widget child, }) : assert(opacity != null && opacity >= 0.0 && opacity <= 1.0), assert(alwaysIncludeSemantics != null), super(key: key, child: child); }

1

2

3

4

5

6

7

8

9

10

Opacity 組件用法 :

設置透明度 : 在 opacity 字段設置透明度值 , 取值范圍 0 ~ 1.0 ;

設置調節透明度的組件 : child 字段設置要調整透明度的組件 ;

// 修改透明度組件 Opacity( opacity: 透明度值, child: 要調整透明度的組件, ),

1

2

3

4

5

6

代碼示例 : 修改 Image 組件的透明度為 50% 透明度 ;

// 修改透明度組件 , 這里設置 50% 透明度 Opacity( opacity: 0.5, // 設置 100x100 大小的圖片組件 child: Image.network("https://img-blog.csdnimg.cn/20210301145757946.png", width: 100, height: 100, ), ),

1

2

3

4

5

6

7

8

9

二、ClipRRect 組件

ClipRRect 組件 : 裁剪方形布局的組件 ;

class ClipRRect extends SingleChildRenderObjectWidget { const ClipRRect({ Key key, this.borderRadius = BorderRadius.zero, // 矩形四個頂點的圓角 this.clipper, this.clipBehavior = Clip.antiAlias, Widget child, // 要裁剪的組件 }) : assert(borderRadius != null || clipper != null), assert(clipBehavior != null), super(key: key, child: child); }

1

2

3

4

5

6

7

8

9

10

11

ClipRRect 組件使用方法 :

設置圓角 : borderRadius 字段設置四個頂點的圓角半徑 ;

設置被裁剪的組件 : child 字段設置被裁剪的組件

// 方形裁剪組件 , 將組件裁剪成方形 child: ClipRRect( // 設置裁剪圓角 borderRadius: 圓角參數 ( BorderRadius 類型 ), // 被裁剪的組件 child: 被裁剪的組件 ( Widget 類型 ), ),

1

2

3

4

5

6

7

代碼示例 :

// 方形裁剪組件 , 將組件裁剪成方形 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, ), ), ),

1

2

3

4

5

6

7

8

9

10

11

12

13

14

三、Padding 組件

Padding 組件 : 主要作用是設置組件的內邊距 ;

class Padding extends SingleChildRenderObjectWidget { const Padding({ Key key, @required this.padding, Widget child, }) : assert(padding != null), super(key: key, child: child); }

1

2

3

4

5

6

7

8

Padding 組件用法 :

設置四個內邊距 : padding 字段設置內邊距 , EdgeInsetsGeometry 類型 ;

設置內邊距作用的組件 : child 字段設置內邊距作用的組件 , Widget 類型 ;

Padding( // 設置內邊距 padding: 內邊距 ( EdgeInsetsGeometry 類型 ), // 內邊距作用組件 child: 內邊距作用組件 ( Widget 類型 ), ),

1

2

3

4

5

6

代碼示例 :

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, ), ), ), ),

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

四、完整代碼示例

完整代碼示例 :

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, ), ), ), ), ], ), ], ), ), ], ), // 刷新時回調的方法 // 列表發生下拉操作時, 回調該方法 // 該回調是 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

運行效果展示 :

五、相關資源

參考資料 :

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小時內刪除侵權內容。