亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

image

GridView(
??gridDelegate:?SliverGridDelegateWithFixedCrossAxisCount(
????crossAxisCount:?3,???//每行個數
????mainAxisSpacing:?2.0,???//每行間距
????crossAxisSpacing:?2.0,??//每列間距
????childAspectRatio:?0.7??//長寬比
??),

?GridView.count(
????padding:?const?EdgeInsets.all(10.0),
????crossAxisSpacing:?10.0,
????crossAxisCount:?3,
????children:?<Widget>[
??????const?Text('I?love'),
??????const?Text('I?love'),
??????const?Text('I?love'),
??????const?Text('I?love'),
??????const?Text('I?love'),
??????const?Text('I?love'),
????],
),

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);

body:?ListView.builder(
????itemCount:?items.length,
????itemBuilder:?(context,?index){
??????return?ListTile(
??????????title:?Text('${items[index]}'),
??????);
????},
)

body:?ListView(
??children:?<Widget>[
????ListTile(
??????leading:?Icon(Icons.favorite_border),
??????title:?Text('favorite_border'),
??????trailing:?Icon(Icons.arrow_forward),
????),ListTile(
??????leading:?Icon(Icons.favorite),
??????title:?Text('favorite'),
??????trailing:?Icon(Icons.arrow_forward),
????),ListTile(
??????leading:?Icon(Icons.ac_unit),
??????title:?Text('ac_unit'),
??????trailing:?Icon(Icons.arrow_forward),
????),ListTile(
??????leading:?Icon(Icons.android),
??????title:?Text('android'),
??????trailing:?Icon(Icons.arrow_forward),
????),
????Image.network("https://img1.sycdn.imooc.com//szimg/5e4644f609ffdfa312000676-360-202.png"),
????Image.network("https://img1.sycdn.imooc.com//szimg/5e703f1408bd81a506000338-360-202.jpg"),
????Image.network("https://img1.sycdn.imooc.com//szimg/5e5621d0092c054612000676-360-202.png"),
????Image.network("https://img1.sycdn.imooc.com//szimg/5d1032ab08719e0906000338-360-202.jpg"),
????Image.network("https://img1.sycdn.imooc.com//szimg/5e6b4ede09bc3b4412000676-360-202.png"),
??],
),

Image圖片組件的使用

• Image Widget的幾種加入形式

1. Image.asset：加載資源圖片，會使打包時包體過大

2. Image.network：網絡資源圖片，經常換的或者動態的圖片

3. Image.file:本地圖片，比如相機照相后的圖片預覽

4. Image.memory:加載到內存中的圖片，Uint8List
   

• Fit屬性的詳細講解，（相當于小程序的mode）

1. fit:?BoxFit.（）,

• 圖片的混合模式

1. colorBlendMode:?BlendMode.color

• Repeat屬性讓圖片重復

1. repeat:?ImageRepeat.（）,

decoration:?new?BoxDecoration(
??gradient:?const?LinearGradient(
??????colors:?[
????????Colors.purple,
????????Colors.orange,
????????Colors.cyan,
????????Colors.deepPurple,
????????Colors.pink,
????????Colors.cyanAccent,
????????Colors.redAccent,
????????Colors.limeAccent
??????])
),

漸變

Contains容器2

• padding內邊距屬性

• margin外邊距屬性

• decoration屬性制作彩色背景

一，padding，margin內邊距屬性

1. edgelnsets.all():統一設置

2. Edgelnsets.fromLTRB(value1,value2,value3)

   
   

二，decoration修飾器（不能與color一起，不然沖突）

1. 設置容器的邊框

2. BoxDecoration Widget講解

3. LinearGradient設置背景顏色漸變

Container 有點類似Layout

Container(
??child:?Text('Hello?Flutter',
??style:TextStyle(fontSize:?50.0,
??????color:Colors.orange),),
??alignment:?Alignment.center,
??width:?300.0,
??height:?400.0,
??color:?Colors.purple,
)

TextWidget文本組件

TextAlign：文本對齊屬性

left/right/start/end?

maxLines：文本顯示的最大行數

overflow：控制文本的溢出效果

clip：直接截斷

ellipsis：省略號

fade：?

字體設置

style:TextStyle

fontSize: 18.0

color:Color.fromARGB(255,255,150,0)

decoration:TextDecoration.underline? 下劃線

decorationStyle:TextDecorationStyle.solid 實線

3-1 Flutter一切皆組件。 TextWidget的常用屬性 TextAlign:文本對齊方式 textAlign:TextAlian.left(center,right,start,end), maxLines:文本顯示的最大行數 overflow:控制文本的溢出效果 ocerflow:TextOverflow.clip(ellipsis,fade), Style的屬性用法 style:TextStyle( fontSize:~,0, color:Color.fromARGB(A,R,G,B) decoration:TextDecoration.underline(none,libeThrongh,overline) decorationStyle:TextDecorationStyle.soild )

120fps

生態環境

服拉特