Flutter常见widget_flutter widget分类

作者：小丑西瓜9 | 2024-03-26 00:04:16

踩

flutter widget分类

                        
                    widget类型widget作用特点
MaterialApp一般作为APP顶层的主页入口，可配置主题，多语言，路由等
Scaffold一般用户页面的承载Widget，包含appbar、snackbar、drawer等material design的设定。
Appbar一般用于Scaffold的appbar ，内有标题，二级页面返回按键等，当然不止这些，tabbar等也会需要它 。
Text显示文本，几乎都会用到，主要是通过style设置TextStyle来设置字体样式等。
RichText富文本，通过设置TextSpan，可以拼接出富文本场景。
TextField文本输入框 ：new TextField(controller: //文本控制器, obscureText: “hint文本”);
Image图片加载: new FadeInImage.assetNetwork( placeholder: “预览图”, fit: BoxFit.fitWidth, image: “url”);
FlatButton按键点击: new FlatButton(onPressed: () {},child: new Container());
Container只有一个子 Widget。默认充满，包含了padding、margin、color、宽高、decoration 等配置。
Padding只有一个子 Widget。只用于设置Padding，常用于嵌套child，给child设置padding。
Stack可以有多个子 Widget。 子Widget堆叠在一起。
Column可以有多个子 Widget。垂直布局。
Row可以有多个子 Widget。水平布局。
Expanded相当于权重，fit为占的比例，在 Column 和 Row 中充满。
decorationBoxDecoration:实现边框、圆角、阴影、形状、渐变、背景图像
gestureDetector用来包裹手势处理的wedget,如：点击，长按，触摸
InkWell水波纹触摸控件
borderRadius控件圆角设置，borderRadius: BorderRadius.all(new Radius.circular(20.0)),
CircleAvatar设置圆角头像，子类设置iamge
PositionedStack层叠组件里头。用于布局子组件的位置,定位控件
Card卡片式布局默认是撑满整个外部容器的，如果你想设置卡片的宽高，需要在外部容器就进行制定。制作的效果如图。
FractionallySizeBox水平方向展开，撑满父布局
Center只有一个子 Widget。只用于居中显示，常用于嵌套child，给child设置居中。
border线条布局，下划线，边线
alignment控件对齐方式
PhysicalModel总设置圆角widget

widget类型	widget作用特点
MaterialApp	一般作为APP顶层的主页入口，可配置主题，多语言，路由等
Scaffold	一般用户页面的承载Widget，包含appbar、snackbar、drawer等material design的设定。
Appbar	一般用于Scaffold的appbar ，内有标题，二级页面返回按键等，当然不止这些，tabbar等也会需要它。
Text	显示文本，几乎都会用到，主要是通过style设置TextStyle来设置字体样式等。
RichText	富文本，通过设置TextSpan，可以拼接出富文本场景。
TextField	文本输入框：new TextField(controller: //文本控制器, obscureText: “hint文本”);
Image	图片加载: new FadeInImage.assetNetwork( placeholder: “预览图”, fit: BoxFit.fitWidth, image: “url”);
FlatButton	按键点击: new FlatButton(onPressed: () {},child: new Container());
Container	只有一个子 Widget。默认充满，包含了padding、margin、color、宽高、decoration 等配置。
Padding	只有一个子 Widget。只用于设置Padding，常用于嵌套child，给child设置padding。
Stack	可以有多个子 Widget。子Widget堆叠在一起。
Column	可以有多个子 Widget。垂直布局。
Row	可以有多个子 Widget。水平布局。
Expanded	相当于权重，fit为占的比例，在 Column 和 Row 中充满。
decoration	BoxDecoration:实现边框、圆角、阴影、形状、渐变、背景图像
gestureDetector	用来包裹手势处理的wedget,如：点击，长按，触摸
InkWell	水波纹触摸控件
borderRadius	控件圆角设置，borderRadius: BorderRadius.all(new Radius.circular(20.0)),
CircleAvatar	设置圆角头像，子类设置iamge
Positioned	Stack层叠组件里头。用于布局子组件的位置,定位控件
Card	卡片式布局默认是撑满整个外部容器的，如果你想设置卡片的宽高，需要在外部容器就进行制定。制作的效果如图。
FractionallySizeBox	水平方向展开，撑满父布局
Center	只有一个子 Widget。只用于居中显示，常用于嵌套child，给child设置居中。
border	线条布局，下划线，边线
alignment	控件对齐方式
PhysicalModel	总设置圆角widget

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/313307