文章目錄

• 一、StatelessWidget 組件
• 二、Container 組件
• 三、BoxDecoration 組件
• 四、Text 組件
• 五、Icon 組件
• 六、 相關(guān)資源

一、StatelessWidget 組件

---

Flutter 中一切都是組件構(gòu)成的 ;

其中最重要的兩個(gè)組件是 ① 無(wú)狀態(tài)的 StatelessWidget 組件 和 ② 有狀態(tài)的 StatefulWidget 組件 ;

StatelessWidget 是 Flutter 中不需要狀態(tài)改變的 Widget 組件 , 其內(nèi)部沒(méi)有需要管理的狀態(tài) ;

StatelessWidget 組件延伸出以下組件 :

• Container : 容器組件 ;
• Text : 文本組件 ;
• Icon : 圖標(biāo)組件 ;
• CloseButton : 關(guān)閉按鈕組件 ;
• BackButton : 返回按鈕組件 ;
• Chip :
• Divider : 分割線組件 ;
• Card : 卡片容器組件 ;
• AlertDialog : 彈窗組件 ;

二、Container 組件

---

Container 組件 : 容器組件 ; 繼承 StatelessWidget , 可以通過(guò)約束其 this.child 子節(jié)點(diǎn) , 設(shè)置該子節(jié)點(diǎn)的 this.alignment 居中方式 , this.padding 邊距 , Color color 顏色值 等參數(shù) ;

詳細(xì)的設(shè)置可以參考 Container 源碼中的構(gòu)造函數(shù)中的參數(shù) , 閱讀每個(gè)參數(shù)的文檔注釋 , 以了解每個(gè)參數(shù)的作用 ;

下面是 Container 組件的源碼 :

class Container extends StatelessWidget {/// Creates a widget that combines common painting, positioning, and sizing widgets.////// The `height` and `width` values include the padding.////// The `color` argument is a shorthand for `decoration: new/// BoxDecoration(color: color)`, which means you cannot supply both a `color`/// and a `decoration` argument. If you want to have both a `color` and a/// `decoration`, you can pass the color as the `color` argument to the/// `BoxDecoration`.Container({Key key,this.alignment, // 居中暗示this.padding, // 邊距Color color, // 顏色值Decoration decoration, // 裝飾器this.foregroundDecoration,double width, // 寬度double height, // 高度BoxConstraints constraints,this.margin,this.transform,this.child,}) : assert(margin == null || margin.isNonNegative),assert(padding == null || padding.isNonNegative),assert(decoration == null || decoration.debugAssertIsValid()),assert(constraints == null || constraints.debugAssertIsValid()),assert(color == null || decoration == null,'Cannot provide both a color and a decoration\n''The color argument is just a shorthand for "decoration: new BoxDecoration(color: color)".'),decoration = decoration ?? (color != null ? BoxDecoration(color: color) : null),constraints =(width != null || height != null)? constraints?.tighten(width: width, height: height)?? BoxConstraints.tightFor(width: width, height: height): constraints,super(key: key); }

Container 源碼使用示例 :

import 'package:flutter/material.dart';class StatelessWidgetPage extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {// 文本組件樣式 , 可以設(shè)置給 Text 文本組件// 設(shè)置字體大小 20, 顏色紅色TextStyle textStyle = TextStyle(fontSize: 20, color: Colors.red);return MaterialApp(title: 'StatelessWidget 組件示例',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(appBar: AppBar(title: Text('StatelessWidget 組件示例'),),// Container 容器使用body: Container(),),);} }

運(yùn)行效果 :

三、BoxDecoration 組件

---

BoxDecoration 裝飾器可一般用于設(shè)置組件的裝飾效果 , 如背景顏色 , 背景圖片 , 背景邊框 , 圓角等效果 ;

BoxDecoration 裝飾器源碼示例 : 在下面的源碼中的構(gòu)造函數(shù)中 , 可以查看該裝飾器可以設(shè)置的選項(xiàng) ;

class BoxDecoration extends Decoration {/// Creates a box decoration.////// * If [color] is null, this decoration does not paint a background color./// * If [image] is null, this decoration does not paint a background image./// * If [border] is null, this decoration does not paint a border./// * If [borderRadius] is null, this decoration uses more efficient background/// painting commands. The [borderRadius] argument must be null if [shape] is/// [BoxShape.circle]./// * If [boxShadow] is null, this decoration does not paint a shadow./// * If [gradient] is null, this decoration does not paint gradients./// * If [backgroundBlendMode] is null, this decoration paints with [BlendMode.srcOver]////// The [shape] argument must not be null.const BoxDecoration({this.color,// 背景顏色this.image,// 背景圖片this.border,// 邊框 this.borderRadius,// 圓角this.boxShadow,// 陰影 this.gradient,// 漸變 this.backgroundBlendMode,// 混合模式, 類似于 Xfermod this.shape = BoxShape.rectangle,// 形狀 }) : assert(shape != null),assert(backgroundBlendMode == null || color != null || gradient != null,'backgroundBlendMode applies to BoxDecoration\'s background color or ''gradient, but no color or gradient was provided.'); }

BoxDecoration 使用示例 : 下面的代碼是為 Container 容器添加裝飾 , 這里只設(shè)置了背景顏色 , 還可以設(shè)置背景圖片 , 邊框等 ;

這里使用 BoxDecoration 為 Container 設(shè)置了灰色背景 ;

import 'package:flutter/material.dart';class StatelessWidgetPage extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {// 文本組件樣式 , 可以設(shè)置給 Text 文本組件// 設(shè)置字體大小 20, 顏色紅色TextStyle textStyle = TextStyle(fontSize: 20, color: Colors.red);return MaterialApp(title: 'StatelessWidget 組件示例',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(appBar: AppBar(title: Text('StatelessWidget 組件示例'),),// Container 容器使用body: Container(// 設(shè)置容器的裝飾器 , BoxDecoration 是最常用的裝飾器// 可以自行查看 BoxDecoration 中可以設(shè)置的屬性decoration: BoxDecoration(color: Colors.grey),// 設(shè)置 child 子組件居中方式, 居中放置alignment: Alignment.center,),),);} }

運(yùn)行效果 : Container 組件的背景由白色變成灰色 ;

四、Text 組件

---

Text 組件可設(shè)置的屬性在 Text 組件源碼的構(gòu)造函數(shù)中可查看 :

class TextStyle extends Diagnosticable {/// Creates a text style.////// The `package` argument must be non-null if the font family is defined in a/// package. It is combined with the `fontFamily` argument to set the/// [fontFamily] property.const TextStyle({this.inherit = true,this.color,this.backgroundColor,this.fontSize,this.fontWeight,this.fontStyle,this.letterSpacing,this.wordSpacing,this.textBaseline,this.height,this.locale,this.foreground,this.background,this.shadows,this.fontFeatures,this.decoration,this.decorationColor,this.decorationStyle,this.decorationThickness,this.debugLabel,String fontFamily,List<String> fontFamilyFallback,String package,}) : fontFamily = package == null ? fontFamily : 'packages/$package/$fontFamily',_fontFamilyFallback = fontFamilyFallback,_package = package,assert(inherit != null),assert(color == null || foreground == null, _kColorForegroundWarning),assert(backgroundColor == null || background == null, _kColorBackgroundWarning); }

代碼示例 :

// 文本組件樣式 , 可以設(shè)置給 Text 文本組件// 設(shè)置字體大小 20, 顏色紅色TextStyle textStyle = TextStyle(fontSize: 20, color: Colors.red);// Text 文本組件// textStyle 是之前創(chuàng)建的 TextStyle textStyle 對(duì)象Text('Container 中的 Text 文本組件示例', style: textStyle,),

完整代碼示例 :

import 'package:flutter/material.dart';class StatelessWidgetPage extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {// 文本組件樣式 , 可以設(shè)置給 Text 文本組件// 設(shè)置字體大小 20, 顏色紅色TextStyle textStyle = TextStyle(fontSize: 20, color: Colors.red);return MaterialApp(title: 'StatelessWidget 組件示例',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(appBar: AppBar(title: Text('StatelessWidget 組件示例'),),// Container 容器使用body: Container(// 設(shè)置容器的裝飾器 , BoxDecoration 是最常用的裝飾器// 可以自行查看 BoxDecoration 中可以設(shè)置的屬性decoration: BoxDecoration(color: Colors.grey),// 設(shè)置 child 子組件居中方式, 居中放置alignment: Alignment.center,// 子組件, 子組件設(shè)置為一個(gè) Column 組件child: Column(// Column 子組件, 這里設(shè)置 Text 文本組件children: <Widget>[// Text 文本組件// textStyle 是之前創(chuàng)建的 TextStyle textStyle 對(duì)象Text('Container 中的 Text 文本組件示例', style: textStyle,),],),),),);} }

運(yùn)行效果 :

五、Icon 組件

---

Icon 組件可以設(shè)置 圖標(biāo) , 大小 , 顏色 等屬性 ;

Icon 源碼 : 下面是 Icon 構(gòu)造函數(shù)源碼 , 構(gòu)造函數(shù)參數(shù)就是主要的設(shè)置選項(xiàng) ;

class Icon extends StatelessWidget {/// Creates an icon.////// The [size] and [color] default to the value given by the current [IconTheme].const Icon(this.icon, { // 圖標(biāo)圖片Key key,this.size, // 大小 this.color, // 顏色值this.semanticLabel,this.textDirection,}) : super(key: key); }

代碼示例 :

// Icon 圖標(biāo)組件Icon(Icons.map, size: 100, color: Colors.green,),

完整代碼示例 :

import 'package:flutter/material.dart';class StatelessWidgetPage extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {// 文本組件樣式 , 可以設(shè)置給 Text 文本組件// 設(shè)置字體大小 20, 顏色紅色TextStyle textStyle = TextStyle(fontSize: 20, color: Colors.red);return MaterialApp(title: 'StatelessWidget 組件示例',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(appBar: AppBar(title: Text('StatelessWidget 組件示例'),),// Container 容器使用body: Container(// 設(shè)置容器的裝飾器 , BoxDecoration 是最常用的裝飾器// 可以自行查看 BoxDecoration 中可以設(shè)置的屬性decoration: BoxDecoration(color: Colors.grey),// 設(shè)置 child 子組件居中方式, 居中放置alignment: Alignment.center,// 子組件, 子組件設(shè)置為一個(gè) Column 組件child: Column(// Column 子組件, 這里設(shè)置 Text 文本組件children: <Widget>[// Text 文本組件// textStyle 是之前創(chuàng)建的 TextStyle textStyle 對(duì)象Text('Container 中的 Text 文本組件示例', style: textStyle,),// Icon 圖標(biāo)組件Icon(Icons.map, size: 100, color: Colors.green,),],),),),);} }

運(yùn)行效果 :

六、 相關(guān)資源

---

參考資料 :

• Flutter 官網(wǎng) : https://flutter.dev/
• Flutter 開發(fā)文檔 : https://flutter.cn/docs ( 強(qiáng)烈推薦 )
• 官方 GitHub 地址 : https://github.com/flutter
• Flutter 中文社區(qū) : https://flutter.cn/
• Flutter 實(shí)用教程 : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart 中文文檔 : https://dart.cn/
• Dart 開發(fā)者官網(wǎng) : https://api.dart.dev/
• Flutter 中文網(wǎng) ( 非官方 , 翻譯的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter 相關(guān)問(wèn)題 : https://flutterchina.club/faq/ ( 入門階段推薦看一遍 )

博客源碼下載 :

• GitHub 地址 : https://github.com/han1202012/flutter_cmd ( 隨博客進(jìn)度一直更新 , 有可能沒(méi)有本博客的源碼 )

• 博客源碼快照 : https://download.csdn.net/download/han1202012/15484718 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )

總結(jié)

以上是生活随笔為你收集整理的【Flutter】StatelessWidget 组件 ( Container 组件 | BoxDecoration 组件 | Text 组件 | Icon 组件 )的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。