Flutter StatelessWidget与基础组件(1.1)

Container

容器组件,继承自StatelessWidget

Container参数	类型	说明
key	Key	Container 唯一标识符，用于查找更新
alignment	Alignment	控制Container的对齐方式
padding	EdgeInsets	EdgeInsets.only(left: )控制左边padding,EdgeInsets.all控制当前周围padding
margin	EdgeInsets	EdgeInsets.only(left: )控制左边margin,EdgeInsets.all控制当前周围margin
decoration	BoxDecoration	绘制在 child 后面的装饰设置decoration后不能设置color否则会编译冲突导致报错
color	Color	设置背景色(不能和decoration装饰器的颜色重复,否则会报错)
width	double	Container 的宽度，设置为 double.infinity 可以强制在宽度上撑满，不设置， 则根据 child 和父节点两者一起布局
height	double	Container 的高度，设置为 double.infinity 即可以强制在高度上撑满
child	Widget	Container 中的内容 Widget

BoxDecoration参数	说明
color	设置背景色
borderRadius	设置容器圆角BorderRadius.all(Radius.circular(double)) /BorderRadius.only(left:,top:,right:,bottom)

来看看代码吧:

注释写的很清楚,来看看最终的效果:

Text

文本组件

注:加粗的是必填参数

Text参数	类型	说明
date	String	显示的内容
maxLines	int	显示最大行数,默认为0
style	TextStyle	文本样式，可定义文本的字体大小、颜色、粗细等
textAlign	TextAlign	文本的对齐方式
textScaleFactor	double	字体缩放系数,例如1.3比原来文字大30%
overflow	TextOverflow	TextOverflow.clip：剪切溢出的文本以修复其容器。TextOverflow.ellipsis：使用省略号表示文本已溢出。TextOverflow.fade：将溢出的文本淡化为透明。
textDirection	TextDirection	文字显示样式,第二行从左边显示TextDirection.ltr,从右到左使用TextDirection.rtl默认是从左到右

TextStyle参数	类型	说明
color	Color	文本颜色
decoration	TextDecoration	下划线(TextDecoration.underline) 上划线（TextDecoration.overline) 删除线（TextDecoration.lineThrough) 无（TextDecoration.none）
decorationColor	Color	绘制文本装饰的颜色
decorationStyle	TextDecorationStyle	画一条虚线 TextDecorationStyle.dashed 画一条虚线 TextDecorationStyle.dotted 画两条线 TextDecorationStyle.double 画一条实线 TextDecorationStyle.solid 画一条正弦线(波浪线) TextDecorationStyle.wavy
fontWeight	FontWeight	FontWeight.bold字体加粗
fontStyle	FontStyle	FontStyle.italic 使用斜体 FontStyle.normal 使用直立
textBaseline	TextBaseline	TextBaseline.alphabetic：文本基线是标准的字母基线 TextBaseline.ideographic：文字基线是表意字基线
fontSize	double	字体大小默认为14pt
letterSpacing	double	水平字母之前的距离负数会让字母离得更近,以至于重合
wordSpacing	double	单词之间的距离负数会让字单词得更近,以至于重合
background	Paint	文本背景色
foreground	Paint	文本前景色,不能与color共存
shadows	List<Shadow>	边框、圆角、阴影、形状、渐变、背景图像等

直接上代码:

效果图:
(黄色背景是Container背景)

Icon

图标组件

Icon参数	属性	说明
key	Key	参考官方文档.
size	double	因为图片是正方形,所以设置的是宽和高,默认是24dp
color	Color	图标颜色
textDirection	TextDirection	文字显示样式,第二行从左边显示TextDirection.ltr,从右到左使用TextDirection.rtl默认是从左到右

效果图:

CloseButton和BackButton

关闭按钮组件 返回按钮组件

ColseButton()关闭按钮没有颜色设置,默认是黑色
BackButton()返回按钮设置,可以随意设置颜色

Chip

标签组件

Chip参数	类型	说明
avatar	Widget	左边图标一般使用Icon()或CircleAvatar()设置左边文字
lable	Widget	文字属性
deleteIcon	Widget	右边删除按钮
deleteButtonTooltipMessage	String	长按删除按钮弹出
onDeleted	VoidCallback	删除按钮响应事件
shape	ShapeBorder	Chip形状
elevation	double	Chip阴影
backgroundColor	Color	背景颜色
padding	EdgeInsetsGeometry	内边距

CircleAvatar组件是将图标裁成圆角

CircleAvatar参数	类型	说明
child	Widget	一般情况都是Text
backgroundColor	color	圆形背景
radius	double	圆的半径

 Chip(
//              avatar: Icon(Icons.ac_unit),//设置左边图标
              avatar: CircleAvatar(
                //设置左边图标
                child: Text("C"),
                backgroundColor: Colors.red,
                radius: 30, //设置圆的大小
              ),
              label: Text("Chip"),
              //设置显示文字
              labelStyle: TextStyle(fontSize: 30),
              //设置文字样式
              labelPadding: EdgeInsets.all(10),
              //设置文字内边距
              deleteIcon: Icon(
                Icons.delete,
                size: 50,
              ),
              //设置右边点击按钮
              deleteButtonTooltipMessage: "长按弹出",
              onDeleted: () {
                //设置Chip点击事件
                print('当前下标为${mChipIndex++}');
              },
              //设置点击事件长按弹出框
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(20))),
              //设置Chip圆角
              elevation: 20,
              //设置阴影

              backgroundColor: Colors.greenAccent,
              //设置Chip背景颜色
              padding: EdgeInsets.all(10),
              
            ),

看看最终的效果吧:

Divider

分割线组件

Divider参数	类型	说明
color	Color	分割线颜色
height	double	分割线高度
thickess	double	分割线宽度
indent	double	分割线距离左边距离
endIndent	double	分割线距离右边距离

Container(
              color: Colors.black,
              margin: EdgeInsets.only(top: 30),
              child: Divider(
                color: Colors.pink,//设置颜色
                height: 60,//设置高度
                thickness: 10,//设置分割线宽度
                indent: 20,//设置距离左边20dp
                endIndent: 100,//设置距离右边100dp
              ),
            )

效果图:

Card

卡片组件

Card参数	类型	说明
color	Color	背景颜色
elevation	double	阴影
child	Widget	子Widget
shape	ShapeBorder	一般使用RoundedRectangleBorder()改变圆角

Card(
              color: Colors.pink,//Card背景色
              elevation: 10,//阴影
              child: Container(
                width: 200,//宽
                height: 100,//高
                child: Text(
                  "卡片布局",
                  textAlign: TextAlign.center,//文字居中
                ),
              ),
              shape: RoundedRectangleBorder(//圆角
                  borderRadius: new BorderRadius.all(new Radius.circular(20))),
            )

效果图:

AlertDialog

弹框组件

AlertDialog参数	类型	说明
title	Widget	AlertDialog标题
content	Widget	AlertDialog显示内容
actions	List<Widget>	子Widget(一般为右下角按钮或文字)
elevation	double	AlertDialog阴影
backgroundColor	Color	背景颜色
shape	ShapeBorder	AlertDialog形状
contentPadding	EdgeInsetsGeometry	文字内边距
contentTextStyle	TextStyle	文本样式

AlertDialog(
                        title: Text("AlertDialog弹框"),//标题
                        content: Text("这里是弹框内容"),//文本内容
                        actions: <Widget>[//子Widget
                          Container(
                            child: Text("确定"),
                          ),
                          Container(
                            child: Text("取消"),
                          ),
                        ],
                        backgroundColor: Colors.green,//背景颜色
                        shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),//圆角
                        elevation: 20,//阴影
                        contentPadding: EdgeInsets.all(20),//文本内容内边距
                        contentTextStyle: TextStyle(fontSize: 20,color: Colors.white),//文本内容样式
                      ),

效果图:

注意事项:
写了这么多组件,占满了整个屏幕,所以会导致出现一个溢出错误,所以需要在外层加一个ListView()组件,这个组件到后边会详细解释,

!!!报错信息!!!
The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.

点击查看完整代码

下一章:Flutter StatefluWidget与基础组件(1.2)

原创不易,你们就是我的动力,请各位点个赞在走8,谢谢啦~