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: 向纵向网格空挡

至此，使用组件的学习就到这儿了，下篇我们将学习布局的相关知识！