Flutter常见widget

最新推荐文章于 2024-05-28 22:29:48 发布

原创最新推荐文章于 2024-05-28 22:29:48 发布 · 293 阅读

0 ·

CC 4.0 BY-SA版权

flutter 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了Flutter框架中的多种Widget，包括MaterialApp、Scaffold、Appbar、Text、RichText、TextField、Image、FlatButton、Container等，涵盖了从应用入口到具体UI元素的全方位组件介绍。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

                    
                        
                    
                    
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