【Flutter】StatelessWidget 组件 ( Container 组件 | BoxDecoration 组件 | Text 组件 | Icon 组件 )

韩曙亮

发布于 2023-03-28 21:34:45

1.7K0

发布于 2023-03-28 21:34:45

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

文章目录

一、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.
  @override
  Widget 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.
  @override
  Widget 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.
  @override
  Widget 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.
  @override
  Widget 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 ( 本篇博客的源码快照 , 可以找到本博客的源码 )

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2021-02-26，如有侵权请联系 cloudcommunity@tencent.com 删除

容器