Flutter开发之常用Widget
一、Text 组件
属性
textAlign: TextAlign.left, -----文本对齐方式
maxLines: 1, -----显示最大行
overflow: TextOverflow.clip, -----文本溢出的处理方式
- clip：直接切断溢出的文字。
- ellipsis:在后边显示省略号（...） 常用
- fade: 渐变消失效果
style文字的样式
body: new Center( child: new Text('非淡泊无以明志，非宁静无以致远。(诸葛亮)', textAlign: TextAlign.left, maxLines: 1, overflow: TextOverflow.ellipsis, style: TextStyle( fontSize: 20, color: Color.fromARGB(255, 0, 0, 255), decoration: TextDecoration.underline, decorationStyle: TextDecorationStyle.solid, fontStyle: FontStyle.italic, )), ),
二、Container组件
Alignment属性，Container内child的对齐方式，也就是容器子内容的对齐方式，并不是容器本身的对齐方式。
padding 内边距
margin 外边距
decoration 装饰器
使用：
body: new Center( child: new Container( child: new Text( '非淡泊无以明志，非宁静无以致远。(诸葛亮)', style: TextStyle(fontSize: 30.0), ), alignment: Alignment.topLeft, width: 500.0, height: 200.0, //color: Colors.lightBlue, //padding: const EdgeInsets.all(10), //内边距 padding: const EdgeInsets.fromLTRB(10.0, 50.0, 0, 0), margin: const EdgeInsets.all(20.0), decoration: new BoxDecoration( gradient: const LinearGradient( colors: [Colors.lightBlue, Colors.green, Colors.purple] ), border: Border.all(width: 5.0,color:Colors.red ), ), ), ),
三、Image组件
加入图片的方式：
- Image.asset 项目资源图片
- Image.file (绝对路径) 系统资源图片
- Image.network（url） 网络资源图片
fit属性
- BoxFit.fill
- BoxFit.contain
- BoxFit.cover
repeat属性
- ImageRepeat.repeat 横向和纵向都重复，铺满整个容器
- ImageRepeat.repeatX 横向重复
- ImageRepeat.repeatY 纵向重复
body: new Center( child: new Container( child: new Image.network( 'https://profile.csdnimg.cn/0/5/2/1_jyd0124', fit: BoxFit.cover, //color: Colors.lightBlue, //colorBlendMode: BlendMode.darken, //图片混合模式（colorBlendMode）和color属性配合使用 ), width: 300.0, height: 200.0, color: Colors.lightGreen, ) ),
四、ListView组件
列表使用
body: new ListView( children: <Widget>[ /*new Image.network( 'https://cdn2.jianshu.io/assets/web/banner-s-club-aa8bdf19f8cf729a759da42e4a96f366.png'), new Image.network( 'https://cdn2.jianshu.io/assets/web/banner-s-7-1a0222c91694a1f38e610be4bf9669be.png'), */ //图片列表使用 new ListTile( leading: new Icon( Icons.perm_camera_mic, ), title: new Text('perm_camera_mic'), ), new ListTile( leading: new Icon( Icons.perm_phone_msg, ), title: new Text('perm_phone_msg'), ), ], ),
横向列表：ListView组件里加一个scrollDirection属性
body: new Center( child: new Container( height: 200.0, child: new ListView( scrollDirection: Axis.horizontal, //Axis.vertical:纵向列表 children: <Widget>[ new Container( width: 230.0, color: Colors.lightBlue, ), new Container( width: 230.0, color: Colors.lightGreen, ), ], ))),
Dart语言List的声明方式：
- var myList = List(): 非固定长度的声明。
- var myList = List(2): 固定长度的声明。
- var myList= List<String>():固定类型的声明方式。
- var myList = [1,2,3]: 对List直接赋值
import 'package:flutter/material.dart'; void main() => runApp(MyApp(items: List<String>.generate(1000, (i) => 'item $i'))); class MyApp extends StatelessWidget { final List<String> items; MyApp({Key key, @required this.items}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'ListView Dome', home: new Scaffold( appBar: new AppBar(title: new Text('ListView Widget')), body: new ListView.builder( itemCount: items.length, itemBuilder: (context, index) { return new ListTile( title: new Text('${items[index]}'), ); }), ), ); } }
五、GridView组件
常用属性：
- crossAxisSpacing:网格间的空当。
- crossAxisCount:一行放置的网格数量
body: GridView.count( padding: EdgeInsets.all(20.0), crossAxisSpacing: 10.0, crossAxisCount: 3, children: <Widget>[ const Text('I am j.y.d'), const Text('I love flutter'), const Text('jyd0124.com'), const Text('2020/02/06'), const Text('Come on,China!'), const Text('Come on,Wuhan!'), ], ),
官方已经不鼓励使用这种方法，另一种写法为
body: GridView( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 3, mainAxisSpacing: 2.0, crossAxisSpacing: 2.0, childAspectRatio: 0.75, ), children: <Widget>[ new Image.network('http://img5.mtime.cn/mg/2019/10/02/105324.67493314_170X256X4.jpg',fit:BoxFit.cover), new Image.network('http://img5.mtime.cn/mg/2019/09/26/092514.83698073_170X256X4.jpg',fit:BoxFit.cover), new Image.network('http://img5.mtime.cn/mg/2019/11/07/111316.10093613_170X256X4.jpg',fit:BoxFit.cover), new Image.network('http://img5.mtime.cn/mg/2019/12/13/094432.64997517_170X256X4.jpg',fit:BoxFit.cover), new Image.network('http://img31.mtime.cn/mt/2014/02/22/230757.74994253_220X124X4.jpg',fit:BoxFit.cover), new Image.network('http://img5.mtime.cn/mg/2019/07/10/164947.40820910_170X256X4.jpg',fit:BoxFit.cover), ], ),
- childAspectRatio:宽高比
-
mainAxisSpacing:横向网格空档
-
crossAxisSpacing: 向纵向网格空挡
至此，使用组件的学习就到这儿了，下篇我们将学习布局的相关知识！
