Android学习Flutter的Widget

最新推荐文章于 2024-04-01 09:35:23 发布

路上的码农

最新推荐文章于 2024-04-01 09:35:23 发布

阅读量228

点赞数

文章标签： android flutter

本文链接：https://blog.csdn.net/gaobaiq/article/details/118572408

版权

在Android中，View是屏幕上显示的所有内容的基础，按钮、工具栏、输入框等一切都是View。在Flutter中，View相当于是Widget。以下的一些常见的Widget以及我们常用到的属性。

1.Scaffold -> 是 Material library 中提供的一个 widget，它提供了默认的导航栏、标题和包含主屏幕 widget 树的 body 属性。
常用属性：

**Scaffold**

 1. appBar:标题栏
 2. body:主体内容
 3. floatingActionButton:浮动在body右下角的组件
 4. backgroundColor:背景颜色
 5. drawer:抽屉菜单
 6. bottomNavigationBar:底部导航栏
 7. resizeToAvoidBottomInset：true默认值，false防止部件被遮挡，解决A RenderFlex overflowed by xx pixels on the bottom问题，但会遮挡控件.

2.AppBar -> 显示在界面顶部的一个 AppBar，也就是 Android 中的 Toolbar。
常用属性：

**AppBar**

 1. leading:左侧显示的图标
 2. title:标题文本
 3. actions:右侧item
 4. centerTitle:标题是否居中
 5. backgroundColor:AppBar背景颜色
 6. bottom:Tab导航栏(AppBarBottomWidget)

3.BottomNavigationBar -> 底部导航条，可以让我们定义底部 Tab 切换。
常用属性：

**BottomNavigationBar**

 1. items:底部导航栏的显示项(List<BottomNavigationBarItem>)
 2. onTab:点击导航栏子项时的回调
 3. currentIndex:当前显示的下标
 4. fixedColor:选中时的颜色
 5. iconSize:icon的大小
 6. type:底部导航栏的类型(BottomNavigationBarType)

4.Container -> 是一个结合了绘制（painting）、定位（positioning）以及尺寸（sizing）widget的widget。它是一个组合的widget，内部有绘制widget、定位widget、尺寸widget。
常用属性(详细属性可看源码)：

**Container**

 1. margin:位置(EdgeInsets)
 2. padding:偏移(EdgeInsets)
 3. width/height:宽/高
 4. transform:变换，可旋转、平移、缩放Container
 5. color:背景颜色
 6. decoration:装饰，可设置圆角、边框等(BoxDecoration)
 7. alignment:对齐方式(Alignment)

注意：alignment设置对齐方式后，Container将会充满其父控件，相当于Android中match_parent，不再是根据子控件调整大小；

5.Column -> 线性布局，垂直方向排布子组件，类似于Android中的LinearLayout控件的vertical;
Row -> 线性布局，水平方向排布子组件，类似于Android中的LinearLayout控件的horizal。对于线性布局，有主轴和纵轴之分，如果布局是沿水平方向，那么主轴就是指水平方向，而纵轴即垂直方向；如果布局沿垂直方向，那么主轴就是指垂直方向，而纵轴就是水平方向。在线性布局中，有两个定义对齐方式的枚举类MainAxisAlignment和CrossAxisAlignment，分别代表主轴对齐和纵轴对齐。
常用属性：

**Column/Row**

 1. textDirection:水平方向子组件的布局顺序，是左往右还是右往左
 2. mainAxisSize:在主轴方向占有空间的值，默认是max(MainAxisSize,max:根据传入的布局约束条件，最大化主轴方向的可用空间,min:与max相反，是最小化主轴方向的可用空间)
 3. mainAxisAlignment:主轴方向上的对齐方式(MainAxisAlignment)
 	.center：将children放置在主轴的中心；
	.end：将children放置在主轴的末尾；
	.spaceAround：将主轴方向上的空白区域均分，使得children之间的空白区域相等，但是首尾child的空白区域为1/2；
	.spaceBetween：将主轴方向上的空白区域均分，使得children之间的空白区域相等，首尾child都靠近首尾，没有间隙；
	.spaceEvenly：将主轴方向上的空白区域均分，使得children之间的空白区域相等，包括首尾child；
	.start：将children放置在主轴的起点；
 4. crossAxisAlignment:children在交叉轴方向的对齐方式，与MainAxisAlignment略有不同
 	.baseline：在交叉轴方向，使得children的baseline对齐；
	.center：children在交叉轴上居中展示；
	.end：children在交叉轴上末尾展示；
	.start：children在交叉轴上起点处展示；
	.stretch：让children填满交叉轴方向；
 5. verticalDirection:水平方向子组件的布局顺序(VerticalDirection)
 6. children:子组件数组

注意：如果Row里面嵌套Row，或者Column里面再嵌套Column，那么只有最外面的Row或Column会占用尽可能大的空间，里面Row或Column所占用的空间为实际大小，如果要让里面的Column占满外部Column，可以使用Expanded 组件放最外层。

6.Flexible/Expanded ->Flexible组件可以使Row、Column、Flex等子组件在主轴方向有填充可用空间的能力，但是不强制子组件填充可用空间；Expanded组件可以使Row、Column、Flex等子组件在其主轴方向上展开并填充可用空间，是强制子组件填充可用空间。

**Flexible/Expanded**

 1. flex:组件的占比，类似Android的weight
 2. fit：FlexFit
 3. child:子组件

8.ClipRect、ClipRRect、ClipOval、ClipPath、CustomClipper->裁剪布局

**ClipRect->将 child 剪裁为给定的矩形大小**

 1. clipper:裁剪区域(CustomClipper)
 2. clipBehavior:裁剪的方式(Clip)
 	.none：不裁剪
	.hardEdge：裁剪但不应用抗锯齿，裁剪速度比none模式慢一点，但比其他方式快。
	.antiAlias：裁剪而且抗锯齿，以实现更平滑的外观。裁剪速度比antiAliasWithSaveLayer快，比hardEdge慢。
	.antiAliasWithSaveLayer：带有抗锯齿的剪辑，并在剪辑之后立即保存saveLayer。
 3.child:子组件

**ClipRRect->将 child 剪裁为圆角矩形**

 1. borderRadius:圆角(BorderRadius.zero)
 2. clipper:裁剪区域(CustomClipper)
 3. clipBehavior:裁剪的方式(Clip)
 	.none：不裁剪
	.hardEdge：裁剪但不应用抗锯齿，裁剪速度比none模式慢一点，但比其他方式快。
	.antiAlias：裁剪而且抗锯齿，以实现更平滑的外观。裁剪速度比antiAliasWithSaveLayer快，比hardEdge慢。
	.antiAliasWithSaveLayer：带有抗锯齿的剪辑，并在剪辑之后立即保存saveLayer。
 4.hild:子组件

ClipOval->如果 child 为正方形时剪裁之后是圆形，如果 child 为矩形时，剪裁之后为椭圆形。

 1. clipper:裁剪区域(CustomClipper)
 2. clipBehavior:裁剪的方式(Clip)
 	.none：不裁剪
	.hardEdge：裁剪但不应用抗锯齿，裁剪速度比none模式慢一点，但比其他方式快。
	.antiAlias：裁剪而且抗锯齿，以实现更平滑的外观。裁剪速度比antiAliasWithSaveLayer快，比hardEdge慢。
	.antiAliasWithSaveLayer：带有抗锯齿的剪辑，并在剪辑之后立即保存saveLayer。
 3.child:子组件

ClipPath->将 child 按照给定的路径进行裁剪
 1. clipper:裁剪区域(CustomClipper)
 2. clipBehavior:裁剪的方式(Clip)
 	.none：不裁剪
	.hardEdge：裁剪但不应用抗锯齿，裁剪速度比none模式慢一点，但比其他方式快。
	.antiAlias：裁剪而且抗锯齿，以实现更平滑的外观。裁剪速度比antiAliasWithSaveLayer快，比hardEdge慢。
	.antiAliasWithSaveLayer：带有抗锯齿的剪辑，并在剪辑之后立即保存saveLayer。
 3.child:子组件

CustomClipper->可以绘制出任何我们想要的形状

9.SingleChildScrollView->有一个子widget的可滚动的widget，子内容超过父容器时可以滚动。

**SingleChildScrollView**

 1. scrollDirection:滚动方向，默认是垂直方向(Axis.vertical)
 2. reverse:是否按照阅读方向相反的方向滑动
 3. padding:内容边距
 4. physics:此属性接受一个ScrollPhysics类型的对象，它决定可以滚动如何响应用户操作，比如用户滑动完抬起手指后，继续执行动画，或者滑动到边界时，如何显示。
 5. controller:此属性接收一个ScrollController对象，ScrollController的主要作用是控制滚动位置和监听滚动事件。
 6. child:子布局

10.Padding->Padding用来为子元素添加填充，也就是指定子元素与容器边界的距离，作用基本上与Android中ViewGroup的padding属性相同。

**Padding**

 1. padding:偏移量(EdgeInsets)
 2. child:子组件

11.GestureDetector->GestureDetector在Flutter中负责处理跟用户的简单手势交互，GestureDetector控件没有图像展示，只是检测用户输入的手势，并作出相应的处理，包括点击、拖动和缩放。许多控件使用GestureDetector为其他控件提供回调，比如IconButton、RaisedButton和FloatingActionButton控件有onPressed回调，当用户点击控件时触发回调，当用户点击控件时触发回调。

**GestureDetector**

 1. onTap:点击(onTap: () {})
 2. onDoubleTap:双击(onDoubleTap: () {})
 3. onLongPress:长按(onLongPress: () {})

12.MaterialButton->默认的是一个最小宽度为88，高度为36,有圆角，有阴影，点击的时候高亮，有 onpress 属性的一个控件。可以响应用户点击事件。但是：官方不推荐使用这个，推荐使用它的子类 RaisedButton、FlatButton 和 OutlineButton，如果自定义 button 推荐使用 RawMaterialButton。

**MaterialButton**

 1. color:当是 enable（onpress != null） 背景色
 2. disabledColor:onpress = null 的时候的颜色
 3. textColor:里面文本的颜色
 4. highlightColor:当用户按下高亮时的颜色
 5. minWidth:最小的宽度 默认是88。在ButtonTheme规定的。(设置为double.infinity,占满全屏)
 6. height:高度
 7. shape:边框样式(RoundedRectangleBorder设置圆角)
 8. onPressed:按下之后松开的回调，也就是所谓的点击事件。其实是当用户手抬起来时的动作
 9. onHighlightChanged:onPressed!=null 的时候可以看出 相当于用户按下时（高亮） 或者 松开时（不高亮）的监听。

**RaisedButton->有阴影，圆角的button**

**FlatButton->没有阴影,没有圆角,有边框,背景透明**

**OutlineButton->没有阴影,有圆角边框的**

**IconButton->只有一个Icon的button**

**BackButton->一个Icon是返回键头的IconButton，点击会调用 Navigator.maybePop 返回上一个路由，默认长按提示是back，且不可去掉**

**CloseButton->一个Icon是x(关闭)的IconButton，点击会调用 Navigator.maybePop 返回上一个路由，默认长按提示是back，且不可去掉**

12.TextField->Material design风格输入框

**TextField**

 1. controller:控制器(TextEditingController)
 2. textInputAction:键盘Enter按钮(TextInputAction)
 3. keyboardType:输入类型(TextInputType)
 4. style:样式(TextStyle)
 5. textAlign:对齐方式(TextAlign)
 6. cursorColor:光标颜色
 7. cursorWidth:光标宽度
 8. cursorRadius:光标圆角
 9. maxLength:最多输入数，有值后右下角就会显示计数器
 10. minLines:最小行数
 11. maxLines:最大行数，高度与行数同步
 12. obscureText: 是否隐藏输入,true密码样式
 13. decoration:装饰(InputDecoration)
 14. onChanged:输入改变回调((value) {})

**TextEditingController**

 TextEditingController controller = TextEditingController();
 controller.text;	// 就是需要拿到的内容

**InputDecoration**

 1. icon:左侧外的图标
 2. labelText:悬浮提示，可替换hintText
 3. labelStyle:悬浮提示文字的样式
 4. helperText:帮助文字
 5. helperStyle:帮助文字样式
 6. hintText:输入提示
 7. hintStype:输入提示样式
 8. errorText:错误提示
 9. errorStyle:错误提示样式
 10. contentPadding:内填充偏移
 11. prefixIcon:左侧内的图标
 12. suffixIcon:右侧内的图标
 13. counter:计数器
 14. counterText:计数器文字
 15. filled:是否填充
 16. fillColor:填充颜色
 17. border:边框(InputBorder)
 18. focusedBorder:聚焦边框
 19. errorBorder:错误时的边框
 20. enableBorder:可用时的边框
 21. disableBorder:不可用时的边框

13.Stack->层叠组件顾名思义，层叠在一起，默认左上角堆叠。配合Align和Positioned使用

**Stack**

 1. alignment:布局定位，默认 AlignmentDirectional.topStart
 2. textDirection:正反排序(TextDirection)
 3. fit:默认StackFit.loose
 4. overflow:此参数用于确定没有定位的子组件如何去适应Stack的大小。StackFit.loose表示使用子组件的大小，StackFit.expand表示扩伸到Stack的大小
 5. overflow:此属性决定如何显示超出Stack显示空间的子组件；值为Overflow.clip时，超出部分会被剪裁（隐藏），值为Overflow.visible 时则不会。
 6. children

**Align->使用Stack与Align 实现定位布局**

 1. alignment:布局定位
 2. widthFactor:如果为非null，则将其高度设置为子高度乘以此系数。必须为正数
 3. heightFactor:如果为非null，则将其宽度设置为子宽度乘以此系数。必须为正数
 4. child

**Positioned->使用Stack与Positioned实现定位布局**

 1. left:左边距
 2. top:上边距
 3. right:右边距
 4. bottom:下边距
 5. width:子元素宽
 6. height:子元素高
 7. child

14.Visibility->控制组件显示与否

**Visibility**

 1. visible:是否可见
 2. child:需要显示的组件

15.ListView->列表组件，可通过itemBuilder设置不同的样式
ListView.builder(itemBuilder:)
默认：itemBuilder: (context, index) => Container()
设置分割线：itemBuilder: (context, index) => itemDividerRow(context, index))
ListView.separated(separatorBuilder:)
设置类型分割线：separatorBuilder: (content, index)

**ListView**

 1. scrollDirection:设置滑动方向 Axis.horizontal 水平  默认 Axis.vertical 垂直
 2. padding:内间距
 3. reverse:是否倒序显示 默认正序 false  倒序true
 4. itemExtent:确定每一个item的高度 会让item加载更加高效
 5. shrinkWrap:内容适配
 6. itemCount:item 数量
 7. controller:滑动监听ScrollController
 8. physics:滑动类型设置
 		AlwaysScrollableScrollPhysics() 总是可以滑动
 		NeverScrollableScrollPhysics()禁止滚动
 		BouncingScrollPhysics() 内容超过一屏 上拉有回弹效果
 		ClampingScrollPhysics() 包裹内容 不会有回弹

16.ListTile->一个包含图标和文字的Item，Flutter 给我们准备好的widget 提供非常常见的构造和定义方式，内容包括文字，icon，点击事件，一般是能够满足基本需求，但是就不能自己定义了

**ListTile**

 1. leading:item 前置图标
 2. title:item 标题
 3. subtitle:item 副标题
 4. trailing:item 后置图标
 5. isThreeLine:item 是否三行显示
 6. contentPadding:item 内容内边距
 7. enabled:是否可用
 8. onTap:item onTap 点击事件
 9. onLongPress:item onLongPress 长按事件

17.Card->Card 是 flutter 提供的一个卡片组件，提供了圆角和阴影，实际用途其实和 Container 差不多。

color:卡片背景色
shadowColor:阴影颜色
elevation:阴影高度
shape:形状 BorderShape
margin:外边距
clipBehavior:裁剪方式

路上的码农

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Android学习Flutter的Widget

在Android中，View是屏幕上显示的所有内容的基础，按钮、工具栏、输入框等一切都是View。在Flutter中，View相当于是Widget。以下的一些常见的Widget以及我们常用到的属性。1.Scaffold -> 是 Material library 中提供的一个 widget，它提供了默认的导航栏、标题和包含主屏幕 widget 树的 body 属性。常用属性：2.AppBar -> 显示在界面顶部的一个 AppBar，也就是 Android 中的 Toolbar。
复制链接

扫一扫