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

简介: 【Flutter】StatelessWidget 组件 ( CloseButton 组件 | BackButton 组件 | Chip 组件 )(一)
+关注继续查看

文章目录

一、CloseButton 关闭按钮组件

二、BackButton 回退按钮组件

三、Chip 组件

四、 相关资源





一、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(),
             
            ],
          ),
        ),
      ),
    );
  }
}


运行效果 :


image.png






二、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(),
            ],
          ),
        ),
      ),
    );
  }
}


运行效果 :

image.png


目录
相关文章
|
2月前
|
API 开发者 索引
Flutter笔记:发布一个多功能轮播组件 awesome_carousel
awesome_carousel 模块是一个Flutter轮播图模块。可以实现包括自定义指示器、动画、滚动等等众多功能。能够指定相当多地细节(可以参考 API 部分了解)本文给出 awesome_carousel 模块的两个简单的用法示例。
23 0
|
3月前
|
人机交互
Flutter笔记 - ListTile组件及其应用
Flutter笔记 - ListTile组件及其应用
38 0
|
5月前
|
缓存 Dart 前端开发
Flutter 中使用 Widgetbook 管理你的组件 | 猫哥
Flutter 界面开发中我们有几个痛点 : - 与设计师协作复用一套设计规范(figma) - 可视化的管理你的组件代码(基础组件、业务组件) - 不同设备尺寸测试你的组件 - 实时修改你的测试组件参数
4177 1
Flutter 中使用 Widgetbook 管理你的组件 | 猫哥
Flutter悬浮UI的设计Overlay组件
Flutter悬浮UI的设计Overlay组件
Flutter开发之Scaffold组件快速开发APP
Flutter开发之Scaffold组件快速开发APP
Flutter利用ScrollController获取、控制滚动组件的滚动位置
Flutter利用ScrollController获取、控制滚动组件的滚动位置
|
7月前
|
存储 容器
flutter系列之:做一个修改组件属性的动画
什么是动画呢?动画实际上就是不同的图片连续起来形成的。flutter为我们提供了一个AnimationController来对动画进行详尽的控制,不过直接是用AnimationController是比较复杂的,如果只是对一个widget的属性进行修改,可以做成动画吗? 答案是肯定的,一起来看看吧。
|
10月前
|
iOS开发 容器
重识Flutter 非常用Slivers组件速览 - part3
通过前面两篇文章,从为什么要使用Sliver,再根据使用频率逐个解析Slivers系列的组件。本文就来讲讲那些不常用的组件,看完这三篇,相信你会入门Sliver的世界。
重识Flutter 非常用Slivers组件速览 - part3
|
11月前
|
容器
Flutter组件使用技巧(一)
Flutter组件使用技巧(一)
|
11月前
|
开发工具 Android开发 容器
Flutter | 布局组件(下)
Flutter | 布局组件(下)