文章目录

• 一、StatelessWidget 组件
• 二、Container 组件
• 三、BoxDecoration 组件
• 四、Text 组件
• 五、Icon 组件
• 六、 相关资源

一、StatelessWidget 组件

---

Flutter 中一切都是组件构成的 ;

其中最重要的两个组件是 ① 无状态的 StatelessWidget 组件 和 ② 有状态的 StatefulWidget 组件 ;

StatelessWidget 是 Flutter 中不需要状态改变的 Widget 组件 , 其内部没有需要管理的状态 ;

StatelessWidget 组件延伸出以下组件 :

• Container : 容器组件 ;
• Text : 文本组件 ;
• Icon : 图标组件 ;
• CloseButton : 关闭按钮组件 ;
• BackButton : 返回按钮组件 ;
• Chip :
• Divider : 分割线组件 ;
• Card : 卡片容器组件 ;
• AlertDialog : 弹窗组件 ;

二、Container 组件

---

Container 组件 : 容器组件 ; 继承 StatelessWidget , 可以通过约束其 this.child 子节点 , 设置该子节点的 this.alignment 居中方式 , this.padding 边距 , Color color 颜色值 等参数 ;

详细的设置可以参考 Container 源码中的构造函数中的参数 , 阅读每个参数的文档注释 , 以了解每个参数的作用 ;

下面是 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) {// 文本组件样式 , 可以设置给 Text 文本组件// 设置字体大小 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(),),);} }

运行效果 :

三、BoxDecoration 组件

---

BoxDecoration 装饰器可一般用于设置组件的装饰效果 , 如背景颜色 , 背景图片 , 背景边框 , 圆角等效果 ;

BoxDecoration 装饰器源码示例 : 在下面的源码中的构造函数中 , 可以查看该装饰器可以设置的选项 ;

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 容器添加装饰 , 这里只设置了背景颜色 , 还可以设置背景图片 , 边框等 ;

这里使用 BoxDecoration 为 Container 设置了灰色背景 ;

import 'package:flutter/material.dart';class StatelessWidgetPage extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {// 文本组件样式 , 可以设置给 Text 文本组件// 设置字体大小 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(// 设置容器的装饰器 , BoxDecoration 是最常用的装饰器// 可以自行查看 BoxDecoration 中可以设置的属性decoration: BoxDecoration(color: Colors.grey),// 设置 child 子组件居中方式, 居中放置alignment: Alignment.center,),),);} }

运行效果 : Container 组件的背景由白色变成灰色 ;

四、Text 组件

---

Text 组件可设置的属性在 Text 组件源码的构造函数中可查看 :

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); }

代码示例 :

// 文本组件样式 , 可以设置给 Text 文本组件// 设置字体大小 20, 颜色红色TextStyle textStyle = TextStyle(fontSize: 20, color: Colors.red);// Text 文本组件// textStyle 是之前创建的 TextStyle textStyle 对象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) {// 文本组件样式 , 可以设置给 Text 文本组件// 设置字体大小 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(// 设置容器的装饰器 , BoxDecoration 是最常用的装饰器// 可以自行查看 BoxDecoration 中可以设置的属性decoration: BoxDecoration(color: Colors.grey),// 设置 child 子组件居中方式, 居中放置alignment: Alignment.center,// 子组件, 子组件设置为一个 Column 组件child: Column(// Column 子组件, 这里设置 Text 文本组件children: <Widget>[// Text 文本组件// textStyle 是之前创建的 TextStyle textStyle 对象Text('Container 中的 Text 文本组件示例', style: textStyle,),],),),),);} }

运行效果 :

五、Icon 组件

---

Icon 组件可以设置 图标 , 大小 , 颜色 等属性 ;

Icon 源码 : 下面是 Icon 构造函数源码 , 构造函数参数就是主要的设置选项 ;

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

代码示例 :

// Icon 图标组件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) {// 文本组件样式 , 可以设置给 Text 文本组件// 设置字体大小 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(// 设置容器的装饰器 , BoxDecoration 是最常用的装饰器// 可以自行查看 BoxDecoration 中可以设置的属性decoration: BoxDecoration(color: Colors.grey),// 设置 child 子组件居中方式, 居中放置alignment: Alignment.center,// 子组件, 子组件设置为一个 Column 组件child: Column(// Column 子组件, 这里设置 Text 文本组件children: <Widget>[// Text 文本组件// textStyle 是之前创建的 TextStyle textStyle 对象Text('Container 中的 Text 文本组件示例', style: textStyle,),// Icon 图标组件Icon(Icons.map, size: 100, color: Colors.green,),],),),),);} }

运行效果 :

六、 相关资源

---

参考资料 :

• 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】StatelessWidget 组件 ( Container 组件 | BoxDecoration 组件 | Text 组件 | Icon 组件 )的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。