flutter基础部件 flutter基础部件

文字

class TextDemo extends StatelessWidget {final String _title = '将进酒'; final String _author = '李白'; @override Widget build(BuildContext context) { return Text( '《$_title》—— $_author 君不见黄河之水天上来，奔流到海不复回。君不见高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。', // 设置对齐方式 textAlign: TextAlign.left, // 最多显示行数 maxLines: 2, // 溢出设置 overflow: TextOverflow.ellipsis, // 设置文字样式 style: TextStyle( fontSize: 16.0, // 字体大小 ), ); } }

富文本

class RichTextDemo extends StatelessWidget { @override Widget build(BuildContext context) { return RichText( text: TextSpan( text: '网页链接：', style: TextStyle( color: Colors.black, // 设置字体颜色 fontSize: 30.0, // 设置字号大小 fontWeight: FontWeight.w800, // 设置字体粗细 ), // 同一段文字需要有不同段样式需要添加children这个属性来设置不同文字的样式 children: [ TextSpan( text: 'https://baidu.com', style: TextStyle( fontSize: 17.0, color: Colors.blue, fontStyle: FontStyle.italic, fontWeight: FontWeight.w100, // 设置字体倾斜 ), ), ], ), ); } }

Container容器

class ContainerDemo extends StatelessWidget { @override Widget build(BuildContext context) { return Container( // 设置容器背景图像 decoration: BoxDecoration( image: DecorationImage( image: NetworkImage('http://i3.qhmsg.com/t01f0a5906f7c201806.jpg'), alignment: Alignment.topCenter, // 背景图对齐方式 repeat: ImageRepeat.noRepeat, // 背景图重复样式 fit: BoxFit.cover, // 背景图填充样式 // 添加背景图滤镜 colorFilter: ColorFilter.mode(Colors.indigoAccent[400].withOpacity(0.5), BlendMode.hardLight), ), ), child: Row( children: [ Container( // 设置容器里面的内容 child: Icon(Icons.pool, size: 32.0, color: Colors.white,), //color: Colors.blue, // 设置容器背景颜色 padding: EdgeInsets.all(15.0), // 设置容器内边距 margin: EdgeInsets.all(20.0), // 设置容器外边距 width: 150.0, // 设置容器宽度 height: 150.0, // 设置容器高度 // 设置容器的装饰效果 decoration: BoxDecoration( color: Colors.blue, // 这里也可以设置背景颜色，如果设置了decoration外面就不可以设置color了 border: Border.all( // 统一设置边框样式 color: Colors.indigoAccent[100], // 边框颜色 width: 5.0, // 边框宽度 style: BorderStyle.solid, // 边框样式 ), //border: Border( // 可以单独设置每个边框的样式 top，bottom，left，right //top: BorderSide( //color: Colors.indigoAccent[100], //width: 3.0, //style: BorderStyle.solid, //) //) // 统一设置圆角 borderRadius: BorderRadius.circular(20.0), //borderRadius: BorderRadius.only( // 单独设置圆角 //topLeft: Radius.circular(30.0), //topRight: Radius.circular(40.0), //bottomLeft: Radius.circular(15.0), //bottomRight: Radius.circular(45.0), //) // 设置阴影 boxShadow: [ BoxShadow( offset: Offset(6.0, 6.0), // 阴影偏移量 color: Color.fromRGBO(16, 20, 188, 1.0), // 阴影颜色，默认是黑色 blurRadius: 20.0, // 阴影模糊程度 spreadRadius: -2.0, // 阴影扩散程度正数扩大阴影面积，负数缩小阴影面积 ) ], // 设置容器的形状 //shape: BoxShape.circle, // 设置为圆形就不能设置圆角，矩形可以设置圆角 // 添加渐变效果 //gradient: RadialGradient( // 镜像渐变 //colors: [ //Colors.blueGrey, //Colors.deepPurpleAccent, //], //), gradient: LinearGradient( // 线性渐变 colors: [ Colors.yellowAccent, Colors.deepPurpleAccent, ], begin: Alignment.topCenter, // 设置渐变的开始位置 end: Alignment.bottomCenter, // 设置渐变结束位置 ), ), ) ], ), ); } }