阅读 557

Flutter学习第四天:StatelessWidget常用组件总结,撑起Flutter的半边天?

StatelessWidget常用组件总结

StatelessWidget常用基础总结,我也是刚刚开始学Flutter,总结一下主要用于以后学习,避免忘记。

在这里插入图片描述 我学习视频的那个老师博客地址,老师说的很不错,清晰易懂。

Flutter学习第一天:小伙花饭钱去买Flutter教学视频,只为了知道Flutter是否支持双系统开发?

Flutter学习第二天:Dart常用数据类型以及方法大总结,满满的干货,对于学过Python和java的太友好了?

Flutter学习的第三天:面向对象编程Dart语言的学习还能让我回忆java基础,“诚不欺我”真的能够快速上手。

1.Text

因为dart采用声明书的布局格式。


TextStyle textStyle = TextStyle(fontSize: 30,    //字体大小
        color:Colors.deepOrange,                     //字体颜色
        decoration: TextDecoration.lineThrough,     //设置删除线
        decorationColor: Colors.green,          //删除线颜色为绿色
        decorationStyle: TextDecorationStyle.wavy,      //删除线为波浪线
        fontWeight: FontWeight.bold,                 //加粗
        fontStyle: FontStyle.italic,          //斜体
        //letterSpacing: 2.0,
       // backgroundColor: Colors.blue,   //背景颜色
       );

 Text(
	   'Hello world',   //输出内容
	   style: textStyle,    //字体格式
	   //textDirection: TextDirection.ltr,
	   softWrap: false,     //自动换行
	   overflow: TextOverflow.fade,  //文字超出屏幕之后的处理方式(clip裁剪,fade 渐隐,ellipsis 省略号)
	   textScaleFactor: 1.0,
	  )
	  
复制代码

排布格式: 在这里插入图片描述 效果: 在这里插入图片描述

2.icon

Icon(
   Icons.access_alarm,  //系统自带图片
   size: 50,            //图片大小
   color: Colors.red,   //图片颜色
   ),
复制代码

如何导入外部图片呢?

1.先新建一个images目录

在这里插入图片描述

在这里插入图片描述

2.导入你需要导入的图片

在这里插入图片描述

3.在pubspec.yaml文件里面加入如图图片地址

在这里插入图片描述

4.使用Image组件导入外部图片

   Image(
      width: 100,
      height: 100,
      image:AssetImage('images/image.png'),
    )
复制代码

效果如下: 在这里插入图片描述

3.CloseButton,BackButton

CloseButton(),
BackButton(),
IconButton(icon:Icon(Icons.people), onPressed: null),
复制代码

效果如下: 在这里插入图片描述

4.chip

   Chip(
    avatar: Icon(Icons.people),  //左边的图片
    label: Text('有趣的小组件'),
    deleteIcon: Icon(Icons.remove_red_eye_outlined),  //右边图片
    onDeleted: ()=>print('删除'),  //响应事件
    ),
复制代码

效果: 在这里插入图片描述

5.Divider

分隔符

 Divider(
   height: 10,
   indent: 10,
   color: Colors.orange,
  ),
复制代码

效果: 在这里插入图片描述

6.Card

 Card(
	color: Colors.blue,   //卡片背景色
	  shadowColor: Colors.red, //阴影颜色
	  elevation: 5,    //阴影高度
	  margin:EdgeInsets.all(10),  //外边距
	  child: Container(   //用Container容器包裹起来
	    width: 150,    
	    height: 80,
	    padding: EdgeInsets.all(10),   //内边距
	    child:Column(
	      children: [
	        Text(
	          'I am Card',        
	          style: textStyle,
	        ),
	        Icon(
	          Icons.add_a_photo,
	          size: 30,
	          color: Colors.orange,
	        )
	      ],
	    )
	  ),
	),
复制代码

效果: 在这里插入图片描述

7.AlertDialog

AlertDialog(
    title: Text('耗子喂汁'),
    content: Text('大意了,没有闪'),
  ),
复制代码

效果: 在这里插入图片描述

持续学习中。。。。

文章分类
Android
文章标签