Flutter_思维导图模板

Flutter

MaterialApp

MaterialApp使用material design的app组件，它是基于WidgetsApp的

material design是google设计的一套界面设计语言，简单来说，这是方便UI设计师们设计UI的一种语言。google为了开发者能更方便地开发出符合material design的app，于是封装了一些符合material design的组件库

theme

ThemeData

调整头部显示

颜色修改 primarySwatch: Colors.deepOrange

子主题2

routes

routers对象是一个Map对象，有Map组成，会使用Navigator.pushNamed来路由。

子主题2

子主题3

Scaffold

布局

子主题2

属性

Scaffold属性介绍

appBar 页面上方导航条

body 页面容器

body

可以通过 Column 添加多个自定义控件

floatingActionButton 悬浮按钮

floatingActionButtonLocation 悬浮按钮位置

floatingActionButtonAnimator 悬浮按钮动画

persistentFooterButtons 显示在底部导航条上方的一组按钮

drawer 左侧菜单

Drawer

设置左边栏

endDrawer 右侧菜单

bottomNavigationBar 底部导航条

子主题1

bottomSheet 一个持久停留在body下方，底部控件上方的控件

resizeToAvoidBottomPadding 已废弃，resizeToAvoidBottomInset作为替代

backgroundColor 背景色

resizeToAvoidBottomInset 默认为 true，防止一些小组件重复

primary 是否在屏幕顶部显示Appbar, 默认为 true，Appbar 是否向上延伸到状态栏，如电池电量，时间那一栏

drawerDragStartBehavior 控制 drawer 的一些特性

extendBody body 是否延伸到底部控件

extendBodyBehindAppBar 默认 false，为 true 时，body 会置顶到 appbar 后，如appbar 为半透明色，可以有毛玻璃效果

drawerScrimColor 侧滑栏拉出来时，用来遮盖主页面的颜色

drawerEdgeDragWidth 侧滑栏拉出来的宽度

drawerEnableOpenDragGesture 左侧侧滑栏是否可以滑动

endDrawerEnableOpenDragGesture 右侧侧滑栏是否可以滑动

作者：Maojunhao

链接：https://www.jianshu.com/p/a0fcb755a7b8

floatingActionButton

foatingActionButtorI属性用于定义应用程序页面上悬停在内容上面的一个圆形图标按钮，用以展示对应程序中的主要动作。
该属性值为FloatingActionButton类型组件, FloatingActionButton组件包含下表所示的常用属性用于设定圆形图标的样式

Center

居中布局

StatelessWidget

无状态组件，状态不可变的widget

StatefulWidget

有状态组件，持有的状态可能在widget生命周期改变

gradient

LinearGradient

线性渐变

子主题1

RadialGradient

子主题1

SweepGradient

扇形渐变

子主题1

borderRadius

画圆角

BorderRadius.circular(5)

Image

Image.asset

Row

水平布局

Container

容器组件

属性

color

颜色设置

height

高

width

宽

child

扩展子组件

alignment

布局摆放

Alignment

可以默认也可以按 x,y 自由定义

decoration

装饰

BoxDecoration

margin

外间距设置

EdgeInsets.all(20),

padding

内间距

EdgeInsets

transform

位移调整 x，y, z 坐标

Matrix4.translationValues(12, 0,9800)

子主题10

子主题11

子主题12

子主题13

EdgeInsets.only(left: 5, right: 5)

设置边距

BoxDecoration

装饰类

属性

const BoxDecoration({
this.color,//背景色
this.image,//图片
this.border,//描边
this.borderRadius,//圆角大小
this.boxShadow,//阴影
this.gradient,//渐变色
this.backgroundBlendMode,//图像混合模式，具体去百度
this.shape = BoxShape.rectangle,//形状,BoxShape.circle和borderRadius不能同时使用
})

border

边框

color

颜色

width

宽度

子主题3

borderRadius 配置圆弧

circular

角度

子主题2

子主题3

boxShadow 设置阴影

阴影可以多层

BoxShadow

const BoxShadow({
super.color,
super.offset,
super.blurRadius,
this.spreadRadius = 0.0,
this.blurStyle = BlurStyle.normal,
});

子主题2

子主题3

子主题4

gradient 渐变

颜色渐变

LinearGradient 背景线性渐变

RadialGradient 径向渐变

SweepGradient 扫描渐变

image

图片

DecorationImage

const DecorationImage({
required this.image,
this.onError,
this.colorFilter,
this.fit,
this.alignment = Alignment.center,
this.centerSlice,
this.repeat = ImageRepeat.noRepeat,
this.matchTextDirection = false,
this.scale = 1.0,
this.opacity = 1.0,
this.filterQuality = FilterQuality.low,
this.invertColors = false,
this.isAntiAlias = false,
}) : assert(image != null),
assert(alignment != null),
assert(repeat != null),
assert(matchTextDirection != null),
assert(scale != null);

image

NetworkImage

网络插入

NetworkImage

BoxShadow

子主题1

Image

scale

缩小

network

网络图片插入

flt

裁剪

BoxFit

repeat

平铺

ImageRepeat

ClipOval

实现圆形图片

将 Image 作为子组件插入

asset

本地图片

子主题7

Text

pubspec.yaml

assets

定义图片资产

fonts

定义字体及图标配置

SizeBox

占据一块元素

Icon

自定义图标配置

通过 IconData 进行图标注入

内部图标通过 Icons

子主题4

子主题3

ListView

列表组件

可以通过 ListTile 创建拖动列表

leading

添加前置信息·

子主题1

trailing

添加后置信息

title

添加标题

subtitle

子标题

Divider(),

可以给列表添加下划线

scrollDirection

horizontal 水平列表

vertical 垂直列表

动态列表写法

SizeBox

Grid View

count 实现网格布局

crossAxisCount

每行显示Widget数量

crossAxisSpacing

水平Widget 之间间距

mainAxisSpacing

垂直Widget 之间间距

childAspectRatio

宽高比

子主题5

子主题6

extent 实现网格布局

maxCrossAxisExent

横轴子元素最大长度

子主题2

子主题3

子主题4

子主题5

子主题3

子主题4

子主题5

Padding

添加组件间距

padding

Column 垂直布局

MainAxisAlignment

主轴排序方式

CrossAxisAlignment

交叉轴对齐方式

Row 水平布局组件

mainAxisAlignment

主轴排序方式

crossAxisAlignment

交叉轴对齐方式

Flex 弹性布局

direction

设置主轴方向，可设置的值为 Axis.horizontal 和 Axis.vertical，交叉轴与主轴方向垂直。

mainAxisAlignment

设置子 Widget 沿着主轴方向的排列方式，默认 MainAxisAlignment.start，可设置的方式如下：

MainAxisAlignment.start：左对齐，默认值;
MainAxisAlignment.end：右对齐;
MainAxisAlignment.center：居中对齐;
MainAxisAlignment.spaceBetween：两端对齐;
MainAxisAlignment.spaceAround：每个 Widget 两侧的间隔相等，与屏幕边缘的间隔是其他 Widget 之间间隔的一半;
MainAxisAlignment.spaceEvently：平均分布各个 Widget，与屏幕边缘的间隔与其他 Widget 之间的间隔相等.

Expended

子主题1

Expended

flex int类型，弹性系数。多个Expanded使用时，可分配子组件在父组件剩余空间的所占空间比例。

GestureDetector

GestureDetector：是手势识别的组件，可以识别点击、双击、长按事件、拖动、缩放等手势

分支主题29

分支主题30

分支主题31

引入库

json_annotation/json_annotation.dart

子主题2

子主题3

子主题4

子主题5

常用方式·

Navigator.pushNamed

跳转页面

Navigator.of(context).pop();

返回上一级

Fluttertoast.showToast

弹框提示

setState

重载页面布局显示

async

异步使用

WidgetsBinding.instance?.addPostFrameCallback((timeStamp)

回调事件

EventBus eventBus = EventBus();

消息总线监听器用于广播消息

eventBus.fire

发送订阅消息可以给全局事件发送

MediaQuery.of(context).size

获取屏幕的宽高

double.infinity

宽度无穷大

MediaQuery.of(context).size.width

屏幕宽度

MediaQuery.of(context).size.height

屏幕高度

PackageInfo.fromPlatform()

从配置文件取版本号

new GlobalKey()

在即将被调用的页面声明接收构造方法，接收参数Globalkey

FilePicker.platform.pickFiles

文件传输

ZipDecoder().decodeBytes

文件解压

utf8.decode(onRoomMsg.body)

flutter 二进制转字符串

XmlDocument.parse

xml 转信息

Navigator.of(context).pushNamed(target)

跳转

print（）

日志输出

Stack 堆叠布局

Positioned

在堆叠布局中自由方位

子主题2

alignment也会影响没有被Positioned包起来的Widget

Align 组件

可以实现居中布局

子主题4

SolidLineConnector 进度条

子主题1

Positioned用于定位 Stack 的子 widge

EventBus

实例化 eventbus
定义消息 event 对象
创建监听器
发送消息
接收消息

event_bus.dart

import 'package:event_bus/event_bus.dart';

EventBus eventBus = new EventBus();

子主题2

子主题3

子主题1

子主题2

子主题1

子主题4

子主题5

AspectRatio

设置调整子元素的宽高比

Card

卡片布局

elevation 阴影布局

shape

RoundedRectandleBorder

配置边框

CircleAvatar

实现原型图片

按钮组件

ElevatedButton(onPressed: onPressed, child: child)

普通按钮

TextButton(onPressed: onPressed, child: child)

文本按钮

OutlinedButton(onPressed: onPressed, child: child)

带边框按钮

IconButton(onPressed: onPressed, icon: icon)

图标按钮

Wrap 组件

spacing

水平间距

runSpacing

垂直间距

AmecCheckBox

子主题1

自定义组件

StatefulWidget 有状态组件

StatelessWidget 无状态组件

子主题1

Stateless widgets 是不可变的, 这意味着它们的属性不能改变——所有的值都是最终的。
如果无状态Widget里面有子Widget，并且子Widget是有状态的，则子Widget的内容是可以通过setState来更改的。无状态Widget影响的仅仅是自己是无状态的，不回影响他的父Widget和子Widget。

UserAccountsDrawerHeader 组件

路由

普通路由

MaterialPageRoute(builder: (BuildContext context){
return const 跳转页面
})

命名路由

在 MaterialApp 中使用 routers 配置全局路由

子主题1

子主题3

监听

StreamSubscription

Future.value(true)

自动返回

关于flutter中 initState() 与 setState() 用法

initState()函数是在组件渲染之前执行的。在Flutter中，initState()是StatefulWidget的生命周期方法之一，在调用build()方法之前被调用。
当创建一个StatefulWidget并将其添加到组件树中时，Flutter会实例化该组件的状态对象，并在调用initState()方法后再调用build()方法来构建UI。
initState()通常用于执行一些初始化操作，比如数据获取、订阅事件、启动定时器等。它只会被调用一次，在组件的整个生命周期中只执行一次。
一旦initState()被调用并完成后，就会立即调用build()方法来构建UI。所以，如果你希望在UI构建之前执行某些操作，可以放在initState()中。
值得注意的是，在initState()中不要执行耗时的操作或阻塞UI线程的操作，因为这可能导致应用程序卡顿。如果需要进行异步操作，可以使用Future、async/await等方式来处理。
setState()方法不会触发initState()的重新执行。当调用setState()时，它会通知Flutter框架重新构建相关的组件树，并调用build()方法来更新UI。
initState()方法只在初始化组件时调用一次，在组件的整个生命周期中不会再次执行。它主要用于执行一些初始化操作，比如数据获取、订阅事件、启动定时器等。
当你调用setState()方法后，Flutter会检测到状态发生了变化，并执行与该组件相关的build()方法来生成新的UI。在build()方法中，你可以使用新的状态值进行UI渲染。
所以，当你在setState()中更新了状态数据后，Flutter将会重新构建相关的组件，但不会重新执行initState()方法。initState()只会在组件初始创建时被调用一次
————————————————
版权声明：本文为CSDN博主「Jushden」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/DongShanYuXiao/article/details/132501191

Flutter 数据存储--shared_preferences使用详情

主要用于持久化数据，如持久化用户信息、列表数据等。

shared_preferences使用的对应类库
我们知道每个平台持久化数据的方式都不一样，而shared_preferences针对不同的平台封装了一个通用的类库，接下来我们看看不同平台下他们使用的库：

iOS： NSUserDefaults
Android： SharedPreferences
Web： localStorage
Linux： FileSystem（保存数据到本地系统文件库中）
Mac OS： FileSystem（保存数据到本地系统文件库中）
Windows： FileSystem（保存数据到本地系统文件库中）

SharedPreferences? sharedPreferences = await SharedPreferences.getInstance();

import 'package:shared_preferences/shared_preferences.dart';

导入头信息

GestureDetector

GestureDetector 是 Android 中的一个辅助类，它可以帮助我们识别用户的手势操作并进行相应的处理。GestureDetector 的使用方法非常简单，只需要创建一个 GestureDetector 对象，并将需要监听手势事件的 View 注册到 GestureDetector 对象中即可

Flutter

模板简介

猜你喜欢

相关文章