前面学习了 Flutter 的文本组件和容器组件,今天来熟悉下图片组件和列表组件。
1.图片组件(Image Widget)
首先,我们应该明确 Flutter 中图片载入的几种方式:
- Image.network : 网络图片,通常后面跟网络图片地址;
- Image.file : 加载本地图片,通常后面跟图片的绝对地址;
- Image.asset : 加载资源图片,通常后面跟图片的相对路径。
下面就以网络图片为例,在容器组件中加入一张图片:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
title: "测试app",
home: Scaffold(
appBar: AppBar(title: Text("appBar"),),
body: Center(
child: Container(
child: Image.network("https://b3logfile.com/bing/20180221.jpg?imageView2/1/w/960/h/540/interlace/1/q/100",scale: 1.0,),
alignment: Alignment.center,
width: 300.0,
height: 300.0,
//child: Text("测试"),
color: Colors.amber,
),)),);
}
}
接下来就是图片组件的几个常用属性:
fit 属性
-
BoxFit.fill:全图显示,图片会被拉伸,并充满父容器。
-
BoxFit.contain:全图显示,显示原比例,可能会有空隙。
-
BoxFit.cover:显示可能拉伸,可能裁切,充满(图片要充满整个容器,还不变形)。
-
BoxFit.fitWidth:宽度充满(横向充满),显示可能拉伸,可能裁切。
-
BoxFit.fitHeight :高度充满(竖向充满),显示可能拉伸,可能裁切。
-
BoxFit.scaleDown:效果和 contain 差不多,但是此属性不允许显示超过源图片大小,可小不可大。
图片混合模式
- color:是要混合的颜色。
- colorBlendMode:是混合模式。
这里的组合比较多,大家可以自行尝试。
child: Container(
child: Image.network("https://b3logfile.com/bing/20180221.jpg?imageView2/1/w/960/h/540/interlace/1/q/100",scale: 1.0,
fit: BoxFit.cover,
color: Colors.blue,
colorBlendMode: BlendMode.darken,),
alignment: Alignment.center,
width: 300.0,
height: 300.0,
color: Colors.amber,
),
repeat 图片重复属性
-
ImageRepeat.repeat: 横向和纵向都进行重复,直到铺满整个画布。
-
ImageRepeat.repeatX: 横向重复,纵向不重复。
-
ImageRepeat.repeatY:纵向重复,横向不重复。
child: Container(
child: Image.network("http://bgweb.yundatainfo.com/uploadFiles/uploadImgs/20190910/f81cb770dd004658bddbf57c7d2ed965.jpg",scale: 1.0,
repeat: ImageRepeat.repeatY,),
alignment: Alignment.center,
width: 500.0,
height: 500.0,
color: Colors.amber,
以上就是图片组件及其属性。
2.列表组件
首先,我们申明一个简单的列表组件:
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
title: "测试app",
home: Scaffold(
appBar: AppBar(title: Text("appBar"),),
body: ListView(
children: <Widget>[
ListTile(
leading: Icon(Icons.access_time),
title: Text("时间"),
),
ListTile(
leading: Icon(Icons.access_alarms),
title: Text("提醒"),
),
ListTile(
leading: Icon(Icons.search),
title: Text("搜索"),
) ],)), );
}
}
如代码,静态列表的使用非常简单,而且 Flutter 内置了相当多的 Icon,十分精美,同样的,大家也可以把列表中的 ListTile
元素换成上面刚提到的图片组件,有兴趣的可以自己尝试。
横向滚动属性
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
title: "测试app",
home: Scaffold(
appBar: AppBar(title: Text("appBar"),),
body: Center(
child: Container(
height: 200,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
width:180.0,
color: Colors.amber,
),
Container(
width:180.0,
color: Colors.deepPurple,
),
Container(
width:180.0,
color: Colors.deepOrange,
),
Container(
width:180.0,
color: Colors.tealAccent,
) ],), ),) ),);
}
}
ListView 组件的 scrollDirection
属性只有两个值,一个是横向滚动,一个是纵向滚动。默认的就是垂直滚动,所以如果是垂直滚动,我们一般都不进行设置。
- Axis.horizontal:横向滚动或者叫水平方向滚动。
- Axis.vertical:纵向滚动或者叫垂直方向滚动。
以上就是静态列表的基本用法和属性。
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于