## TextWidget常用属性 1. textAlign（TextAlign）：文本对齐属性（注意：在container中生效，若不在则：若多行，则左中右都可，若单行，只靠左） 2. textDirection（TextDirection）：文本方向 123 56=》65 123 2. maxLines（init）：文本显示的最大行数 3. overflow（TextOverflow）：控制文本的溢出效果 4. style（TextStyle）： **style（TextStyle）**： 文字样式设计，主要有： fontSize(double):字体大小 color(Color,Colors):字体颜色 fontWeight(FontWeight)：加粗 fontStyle（FontStyle）：字体样式，斜体 decoration(TextDecoration): 文字装饰，比如下划线，中划线 decorationColor(Color,Colors):文字装饰的颜色 decorationStyle(TextDecorationStyle):文字装饰线条类型 decorationThickness(double):文字装饰线条宽度 letterSpacing():字间距（英文指每个字母之间，中文指每个字体之间） backgroundColor(Color,Colors):字体背景颜色， wordSpacing：字体间距离（英文指每个单词间） textBaseline:基线 shadows：绘制文字阴影 fontFamily：文字字体"Rock Salt" height：好像是设置line-height的 ~~~ child:Text( 'hello Flutter hello Flutter hello Flutter hello Flutter hello Flutter hello Flutter hello Flutter ', textAlign: TextAlign.justify, //left end center justify start // maxLines: 1, // overflow: TextOverflow.ellipsis,//clip(默认值),ellipsis（超出文本显示省略号） fade(超出部分渐变) style:TextStyle( fontSize:25.0, //需要写.0的形式，否则报错 浮点型 color: Color.fromARGB(255, 255, 150, 150),//a 代表透明度(0-255) decoration: TextDecoration.lineThrough, //lineThrough none overline underline decorationStyle: TextDecorationStyle.dotted // 下划线样式 dashed dotted double solid ) ) ~~~ ## Container组件 注意宽度和高度 1. child 2. height(double):高度 3. width：宽度 4. padding(EdgeInsets):内边距 fromLTRB(左，上，右，下) 5. margin：同padding 6. alignment(Alignment)：child在容器中的对齐方式 7. transform(Matrix4):动画 translationValues rotationZ 9. decoration(BoxDecoration)：背景颜色，边框，圆角 * color(Color, Colors):背景颜色， * border(Border):边框 同时设置四条边框 ~~~ Border.all( width: 2.0//边框宽度 color: Colors.pink//边框颜色, style: BorderStyle.solid//只支持实线 ) ~~~ 设置单边框 ~~~ border: Border( left: BorderSide( color: Colors.black, width:2.0, ), right: BorderSide( color: Colors.blue, width:4.0, ), ), ~~~ * borderRadius：圆角 写法一： ~~~ borderRadius: BorderRadius.all( Radius.circular(20), ), ~~~ 写法二： ~~~ BorderRadius.circular(40) ~~~ 不规则： 写法一 ~~~ borderRadius: BorderRadius.vertical( top: Radius.elliptical(50, 50), bottom: Radius.elliptical(50, 50) ), ~~~ 写法二： ~~~ borderRadius: BorderRadius.horizontal( left: Radius.elliptical(40, 40), right: Radius.elliptical(50, 50) ), ~~~ * image * boxShadow * gradient * shape ## Image * 属性 Image.asset:本地图片 Image.network：远程图片 网络图片： ~~~ Image.network( 'url地址', width:100.0,//宽度 height:100.0//高度 // fit cover:全屏显示，会拉伸剪裁，不变形,常用 fit:BoxFit.fill //contain fitWidth fitHeight cover repeat: ImageRepeat.repeat, alignment:Aliment ) ~~~ 注意： Image中的width和height容易失效，最后控制Container的宽度和高度 Image中的 alignment也容易失效：外围Container中有alignment时 * 本地图片 移入本地图片： 1. images目录 2. 2.0x 3.0x 4.0x images目录 3. 把图片分别放在文件夹中 4. 因为flutter项目运行在手机上，根据不同分辨率加载不同图片，因此必须2.x 3.x 5. 配置pubspec.yaml，需要在asstes，把配置的图片引入 ~~~ child: Container( child: Image.asset( 'images/location.png', width: 100, height: 100, fit: BoxFit.cover ), ), ~~~ * 圆形图片 推荐写法： ~~~ child: Container( child: ClipOval( child: Image.network( 'http://szimg.mukewang.com/5baf3f0a000180df06000338-360-202.jpg', width: 300, height: 300,//image组件的高度和宽度 fit: BoxFit.cover ), ), ), ~~~ ## ListView组件 scrollDirection: Axis.horizontal水平列表 Axis.vertical垂直列表 padding： EdgetInsetsGeometry 内边距 resolve：组件反向排序 children：集合元素 List 注意： **ListView有水平和高度自适应性，因此经常将器包围在Container中，并为其设置高度或宽度** ### ListTile组件 leading：前面放图标 ~~~ leading: Image.asset('images/location.png'), ~~~ trailing：后面放图标，也可以加载图片 title：列表主标题（Text） subtitle：Text二级标题 selected: true, //选中状态，默认图标和字体都是蓝色 isThreeLine：是否显示三行文本 dense: true,//是否密集 contentPadding: EdgeInsets.fromLTRB(16, 0, 16, 0) //内容区域的padding，此值为默认值 enabled: false 注意： ListView不止可以放ListTile组件，还可以放其他组件 Container组件，Image组件