java valuewidget_Flutter开发之常用Widget
使用：
body: newCenter(
child:newContainer(
child:newText('非淡泊無以明志，非寧靜無以致遠。(諸葛亮)',
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:newBoxDecoration(
gradient:constLinearGradient(
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: newCenter(
child:newContainer(
child:newImage.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: newListView(
children:[/*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'),*/ //圖片列表使用
newListTile(
leading:newIcon(
Icons.perm_camera_mic,
),
title:new Text('perm_camera_mic'),
),newListTile(
leading:newIcon(
Icons.perm_phone_msg,
),
title:new Text('perm_phone_msg'),
),
],
),
橫向列表：ListView組件里加一個scrollDirection屬性
body: newCenter(
child:newContainer(
height:200.0,
child:newListView(
scrollDirection: Axis.horizontal,//Axis.vertical:縱向列表 children: [newContainer(
width:230.0,
color: Colors.lightBlue,
),newContainer(
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.generate(1000, (i) => 'item $i')));class MyApp extendsStatelessWidget {final Listitems;
MyApp({Key key, @requiredthis.items}) : super(key: key);
@override
Widget build(BuildContext context) {returnMaterialApp(
title:'ListView Dome',
home:newScaffold(
appBar:new AppBar(title: new Text('ListView Widget')),
body:newListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {return newListTile(
title:new Text('${items[index]}'),
);
}),
),
);
}
}
五、GridView組件
常用屬性：
crossAxisSpacing:網格間的空當。
crossAxisCount:一行放置的網格數量
body: GridView.count(
padding: EdgeInsets.all(20.0),
crossAxisSpacing:10.0,
crossAxisCount:3,
children:[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:[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:?向縱向網格空擋
至此，使用組件的學習就到這兒了，下篇我們將學習布局的相關知識！
總結
以上是生活随笔為你收集整理的java valuewidget_Flutter开发之常用Widget的全部內容，希望文章能夠幫你解決所遇到的問題。
