一、Text 組件 屬性 textAlign: TextAlign.left, 文本對齊方式 maxLines: 1, 顯示最大行 overflow: TextOverflow.clip, 文本溢出的處理方式 clip：直接切斷溢出的文字。 ellipsis:在後邊顯示省略號（...） 常用 fad ...
一、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: 向縱向網格空擋
至此，使用組件的學習就到這兒了，下篇我們將學習佈局的相關知識！
