【无标题】Flutter wedget

环境搭建以及目录介绍

• 环境搭建

1. 1. 下载JDK,配置Java_Home,Path环境遍历
   2. 下载安装Android Studio
   3. 下载配置Flutter SDK
   4. Android Studio中配置Dart和Flutter插件,以及Flutter SDK

• 目录介绍

文件夹	作用
android	android平台相关代码
ios	ios平台相关代码
lib	flutter相关代码(主要别写的代码存放位置)
test	用于存放测试代码
pubspec.yaml	配置文件,包含资源文件,三库依赖等

• 入口文件与入口方法

​ 每一个Flutter项目的lib目录中都有一个main.dart,该文件就是Flutter的入口文件;

​ main.dart文件中的main方法即为入口方法

常用Widget介绍

文本控件

属性	作用
textAlign	文本对齐方式
softWrap	true:自动换行处理,false:单行
maxLines	最大行数
overflow	TextOverflow.ellipsis溢出处理,多余的文本设置成…
style(TextStyle)	color:文本颜色
fontWeight:字体粗细程度
fontSize:字体大小
fontStyle:字体样式
wordSpacing:字母/字间距
letterSpacing:单词间距
shadows:阴影[Shadow(color:Colors.red,offset:Offset(1,1),blurRadius:5)]

图片控件

控件	属性	作用
Image	Image.asset	资源文件图片
Image.network	网络图片
Image.memory	内存中的图片
Image.netwfileork	磁盘文件(需申请读取权限)
BoxFit.fill	适配显示方式
Icon	size	大小
color	颜色
textDirection	方向(TextDirection.rtl)

按钮控件

属性	作用
onPressed	点击事件处理
textColor	文本颜色
color	按钮颜色
highlightColor	点击按钮后的颜色
elevation	按钮图层高度
highlightElevation	点击按钮高亮后的图层高度
animationDuration	点击按钮后过渡动画时间
child	按钮内容显示
borderRadius	按钮圆角设置

输入框控件

属性	左右
labelText	输入框文本标签
labelStyle	标签文本风格
hintTextt	输入提示
errorText	错误提示文本
prefixIcon	输入框前缀图标
contentPadding	输入框内容padding值
highlightElevation	点击按钮高亮后的图层高度
animationDuration	点击按钮后过渡动画时间
decoration	BoxDecoration文本框装饰背景图片
borderRadius	BorderRadius输入框圆角设置
boxShadow	boxShadow:阴影[BoxShadow(color:Colors.red,offset:Offset(1,1)]

选择控件

属性	作用
CheckBox	value(true/false):控件状态值
onChanged:是否选中的状态监听
tristate:是否有三种状态
activeColor:checkBox颜色
Switch	value(true/false):控件状态值
onChanged:是否选中的状态监听
Slider	value(true/false):控件状态值
onChanged:滑动监听,监听当前值
onChangeStart:开始滑动时的监听
onChangeEnd:结束滑动时的监听
activeColor:滑动过的颜色
inactiveColor:未选中的颜色
Radio	value(true/false):控件状态值
onChanged:是否选中的状态监听
groupValue:当前Radio group选中的值
CupertinoSwitch	value(true/false):控件状态值
onChanged:是否选中的状态监听
CupertinoSlider	同Slider
CupertinoSegmentedControl	children:选项集合widget
groupValue:默认选中的值
onValueChange:选中的变化监听
unSelectedColor:未选中颜色

弹框浮层

Widget	属性	作用
SimpleDialog	title	标题
titlePadding	标题的内边距
children	List操作按钮数据
AlertDialog	title	标题
titlePadding	标题的内边距
actions	List操作按钮数组
content	弹框展示的主要内容
contentPadding	内容的padding值
BottomSheet	decoration	背景样式
child	展示的内容
CupertinoNavigationBar	middle	导航栏中间控件
leading	导航栏左边控件
trailing	导航栏右边控件
backgroundColor	导航栏背景色
actionsForegroundColor	leading和trailing图标或文本颜色
CupertinoTabBar	currentIndex	TabBar控制器,通过controller对象添加addListener方法监听切换动作
onTap	标签栏显示项集合
items	List标签栏项集合
tabBuilder	标签栏对应的页面创建

列表

Widget	属性	作用
ListView的创建	scrollDirection	表示控件滚动的方向
reverse	表示读取内容的方向是否颠倒
premary	true/false:内容不够时是否支持滑动
physics	表示物理反馈
padding	控件的内边距
controller	用于控制视图滚动位置的控制器对象
itemExtent	item的高度/宽度
children	表示列表包含的widget集合
ListView.builder的创建	itemCount	表示列表的条目总数量
itemBuilder	创建item widget的函数

网格

Widget	属性	作用
GridView的创建	crossAxisCount	表示垂直于主轴方向上的单元格Widget数量
mainAxisSpacing	主轴方向单元格的间距
crossAxisSpacing	垂直于主轴方向的单元格间距
children	表示列表包含的widget集合
childAspectRatio	单元格的宽高比
gridDelefate	网络代理对象,一般使用SliverGridDelegateWithFixedCrossAxisCount对象创建,可指定crossAxisCount,mainAxisSpacing,crossAxisSpacing和childAspectRatio等值
GridView.builder的创建	itemCount	表示列表的条目总数量
itemBuilder	创建item widget的函数

其他常用布局widget

Container,Padding,Center,Aligs,Baseine,Row,Column…

路由相关

• 概述
  F Iutter 中的路由通俗的讲就是页面跳转,在 Flutter 中通过 Navigator 组件管理路由导肮。并提供了管理堆栈的方法．如： Navigator . push 和 Navigator . pop

• 路由分类
  FIUtter 中给我们提供了两种配且路由跳转的方式:基本路由和命名路由

• • 基本路由的使用

1. 1. 1. 基本使用

    Navigator · of ( conteXt ) . Push ( MaterialPageRoute ( builden ( BuildConteXt conteXt ) { return SearchPageo : } ) )

1. 1. 1. 传值使用

Navigator·of(conteXt).Push(MateriaIPageRoute(builder:( BuildConteXt conteXt ) { return SearchPage ( title : ”表单‘ ' ) ：刀传值） ) ) 

• • 命名路由的使用

1. 1. 1. 基本使用

Navigator . PushNamed ( conteXt , ' / , earch ' ) ;

1. 1. 1. 传值使用

    Navigator . pushNamed ( conteXt , ' / form ' , arguments : arguments ) :