【Flutter】StatelessWidget 组件 ( CloseButton 组件 | BackButton 组件 | Chip 组件 )

韩曙亮

发布于 2023-03-28 21:35:03

1.3K0

发布于 2023-03-28 21:35:03

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

文章目录

一、CloseButton 关闭按钮组件

通常用于作为关闭界面的按钮 , 直接使用构造函数创建即可 , 参数一般为空 ;

代码示例 :

              // 关闭按钮
              CloseButton(),

完整代码示例 :

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

              // 关闭按钮
              CloseButton(),
              
            ],
          ),

        ),
      ),
    );
  }
}

运行效果 :

二、BackButton 回退按钮组件

BackButton 组件通常作为界面回退按钮组件 , 直接使用构造函数创建 , 参数一般为空 ;

代码示例 :

              // 返回按钮
              BackButton(),

完整代码示例 :

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

              // 关闭按钮
              CloseButton(),

              // 返回按钮
              BackButton(),

            ],
          ),

        ),
      ),
    );
  }
}

运行效果 :

三、Chip 组件

Chip 组件比较复杂 , 可设置的配置较多 , 可参考其源码逐个研究每个字段的含义 ;

Chip 组件源码 : 下面是 Chip 组件构造函数源码 ;

class Chip extends StatelessWidget implements ChipAttributes, DeletableChipAttributes {
  /// Creates a material design chip.
  ///
  /// The [label], [autofocus], and [clipBehavior] arguments must not be null.
  /// The [elevation] must be null or non-negative.
  const Chip({
    Key key,
    this.avatar,	// 图标
    @required this.label,	// 文本内容 
    this.labelStyle,
    this.labelPadding,
    this.deleteIcon,
    this.onDeleted,
    this.deleteIconColor,
    this.deleteButtonTooltipMessage,
    this.shape,
    this.clipBehavior = Clip.none,
    this.focusNode,
    this.autofocus = false,
    this.backgroundColor,
    this.padding,
    this.materialTapTargetSize,
    this.elevation,
    this.shadowColor,
  }) : assert(label != null),
       assert(autofocus != null),
       assert(clipBehavior != null),
       assert(elevation == null || elevation >= 0.0),
       super(key: key);

代码示例 :

              // Chip 组件
              Chip(
                // Chip 组件的图标
                avatar: Icon(Icons.access_alarm, color: Colors.blue,),
                label: 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(Icons.map, size: 100, color: Colors.green,),

              // 关闭按钮
              CloseButton(),

              // 返回按钮
              BackButton(),

              // Chip 组件
              Chip(
                // Chip 组件的图标
                avatar: Icon(Icons.access_alarm, color: Colors.blue,),
                label: Text('闹钟', style: textStyle,),
              ),
              
            ],
          ),

        ),
      ),
    );
  }
}

运行效果展示 :

四、相关资源

参考资料 :

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 删除

博客