文章目錄

• • 一、Text 組件
  • 二、Container組件
  • 三、Image組件
  • 四、ListView組件
  • 五、GridView組件

一、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():固定類型的聲明方式。
• 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);@overrideWidget 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: 向縱向網格空擋

至此，使用組件的學習就到這兒了，下篇我們將學習布局的相關知識！

總結

以上是生活随笔為你收集整理的Flutter开发之常用Widget学习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。