Container容器组件的使用
Container容器组件的使用
Container(容器控件)在Flutter是经常使用的控件,它就相当于我们HTML里的div标签,每个页面或者说每个视图都离不开它
Alignment属性
- bottomCenter:下部居中对齐。
- botomLeft: 下部左对齐。
- bottomRight:下部右对齐。
- center:纵横双向居中对齐。
- centerLeft:纵向居中横向居左对齐。
- centerRight:纵向居中横向居右对齐。
- topLeft:顶部左侧对齐。
- topCenter:顶部居中对齐。
- topRight: 顶部居左对齐。
代码
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Text widget',
home: Scaffold(
body: Center(
child: Container(
child: new Text('Hello LXS',style:TextStyle(fontSize:40.0),),
alignment: Alignment.center,
width: 500.0,
height: 400.0,
color: Colors.lightBlue,
),
),
),
);
}
}
padding属性
padding的属性就是一个内边距,它和你使用的前端技术CSS里的padding表现形式一样,指的是Container边缘和child内容的距离。
padding简易书写方式
padding: const EdgeInsets.all(20),
EdgeInsets.all(20)很多情况并不满足我们的需求,所以:
padding: const EdgeInsets.fromLTRB(10,30,20,20),
我们用EdgeInsets.fromLTRB(value1,value2,value3,value4) 可以满足我们的需求,LTRB分别代表左、上、右、下
margin属性
margin是外边距,只的是container和外部元素的距离。 现在要把container的外边距设置为10个单位,代码如下:
margin: const EdgeInsets.all(10.0),
margin 同样拥有自定义的能力:
margin: const EdgeInsets.fromLTRB(10.0,30.0,10.0,10.0)
decoration属性
decoration是 container 的修饰器,主要的功能是设置背景和边框。 比如你需要给背景加入一个渐变,这时候需要使用BoxDecoration这个类,代码如下(需要注意的是如果你设置了decoration,就不要再设置color属性了,因为这样会冲突)。
child: Container(
child: new Text('Hello LXS',style:TextStyle(fontSize:40.0),),
alignment: Alignment.topLeft,
width: 500.0,
height: 400.0,
// color: Colors.lightBlue,
padding: const EdgeInsets.fromLTRB(10,30,20,20),
margin: const EdgeInsets.fromLTRB(10.0,30.0,10.0,10.0),
decoration: new BoxDecoration(
gradient: const LinearGradient(
colors: [Colors.lightBlue,Colors.greenAccent,Colors.purple]
)
),
),
注意:一定要去掉color属性
border 边框
设置边框可以在decoration里设置border属性,比如你现在要设置一个红色边框,宽度为5。代码如下:
child: Container(
child: new Text('Hello LXS',style:TextStyle(fontSize:40.0),),
alignment: Alignment.topLeft,
width: 500.0,
height: 400.0,
padding: const EdgeInsets.fromLTRB(10,30,20,20),
margin: const EdgeInsets.fromLTRB(10.0,30.0,10.0,10.0),
decoration: new BoxDecoration(
gradient: const LinearGradient(
colors: [Colors.lightBlue,Colors.greenAccent,Colors.purple]
),
border: Border.all(width: 5.0,color: Colors.red)
),
),
主要代码是:
border:Border.all(width:5.0,color:Colors.red)
Image图片组件的使用
在程序中图片必不可少,接下来学习一下图片的使用:
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp (
title: 'Text Widget',
home: Scaffold(
body:Center(
child:Container(
child: new Image.network(
'https://img2.woyaogexing.com/2019/06/09/dd1cce5fd57e48e8911a8fc9e872979d!400x400.jpeg',
scale:1.0
),
width:300.0,
height:200.0,
color:Colors.lightBlue
),
),
),
);
}
}
加入图片的几种方式
- Image.asset:加载资源图片,就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积,用的是相对路径。
- Image.network:网络资源图片,意思就是你需要加入一段http://xxxx.xxx的这样的网络路径地址。
- Image.file:加载本地图片,就是加载本地文件中的图片,这个是一个绝对路径,跟包体无关。
- Image.memory: 加载Uint8List资源图片,这个我目前用的不是很多,所以没什么发言权。
fit属性的设置
fit属性可以控制图片的拉伸和挤压,这些都是根据图片的父级容器来的,我们先来看看这些属性(建议此部分组好看视频理解)。
- BoxFit.fill:全图显示,图片会被拉伸,并充满父容器。
- BoxFit.contain:全图显示,显示原比例,可能会有空隙。
- BoxFit.cover:显示可能拉伸,可能裁切,充满(图片要充满整个容器,还不变形)。
- BoxFit.fitWidth:宽度充满(横向充满),显示可能拉伸,可能裁切。
- BoxFit.fitHeight :高度充满(竖向充满),显示可能拉伸,可能裁切。
- BoxFit.scaleDown:效果和contain差不多,但是此属性不允许显示超过源图片大小,可小不可大。
child:Container(
child: new Image.network(
'https://img2.woyaogexing.com/2019/06/09/dd1cce5fd57e48e8911a8fc9e872979d!400x400.jpeg',
fit: BoxFit.fill,
),
width:300.0,
height:200.0,
color:Colors.lightBlue
),
图片的混合模式
图片混合模式(colorBlendMode)和color属性配合使用,能让图片改变颜色,里边的模式非常的多,产生的效果也是非常丰富的。在这里作几个简单的例子,让大家看一下效果,剩下的留给小伙伴自己探索
child:new Image.network(
'https://img2.woyaogexing.com/2019/06/09/dd1cce5fd57e48e8911a8fc9e872979d!400x400.jpeg',
color: Colors.greenAccent,
colorBlendMode: BlendMode.darken,
width: 100,
height: 100,
),
color:是要混合的颜色,如果你只设置color是没有意义的。 colorBlendMode:是混合模式,相当于我们如何混合。
repeat图片重复
基本使用代码:
child: new Image.network(
'https://img2.woyaogexing.com/2019/06/09/dd1cce5fd57e48e8911a8fc9e872979d!400x400.jpeg',
repeat: ImageRepeat.repeatY,
width: 100,
height: 100,
),
- ImageRepeat.repeat : 横向和纵向都进行重复,直到铺满整个画布
- ImageRepeat.repeatX: 横向重复,纵向不重复
- ImageRepeat.repeatY:纵向重复,横向不重复
- ImageRepeat.noRepeat:单图显示,不重复
还有非常多炫酷的效果大家可以自己尝试
ListView 列表组件简介
列表组件的知识其实是很多的,也是一个经常使用的组件,这节我们先学习最简单的列表组件如何制作。
话不多说线上代码,代码如下:
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
///纵向列表
class MyApp extends StatelessWidget {
@override
Widget build (BuildContext context) {
return MaterialApp(
title: 'LXS Flutter Demo',
home: Scaffold(
appBar: new AppBar(
title: new Text('listView Widget'),
),
// body: new Text('ListView Widget'),
body: new ListView(
children: <Widget>[
// new ListTile (
// leading:new Icon(Icons.access_time),
// title: new Text('access_time')
// ),
// new ListTile (
// leading:new Icon(Icons.accessibility),
// title: new Text('accessibility')
// ),
// new ListTile (
// leading:new Icon(Icons.add_a_photo),
// title: new Text('add_a_photo')
// ),
new Image.network(
'https://jspang.com/images/bilibili_count.jpg',
fit: BoxFit.fitWidth,
repeat: ImageRepeat.repeatX,
// height:100.0,
),
new Image.network(
'https://jspang.com/images/bilibili_count.jpg',
fit: BoxFit.fitWidth,
repeat: ImageRepeat.repeatY,
// height:200.0,
),
new Image.network(
'https://jspang.com/images/bilibili_count.jpg',
fit: BoxFit.fitWidth,
repeat: ImageRepeat.repeatY,
// height:300.0,
),
],
),
// backgroundColor: Colors.blue,
),
);
}
}
制作横向列表
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp (
title: 'Text Widget',
home: Scaffold(
body: Center(
child: Container(
height: 200.0,
child: MyList(),
),
),
),
);
}
}
class MyList extends StatelessWidget {
@override
Widget build (BuildContext context) {
return ListView (
scrollDirection: Axis.horizontal,
children: <Widget>[
new Container(
width: 180.0,
color: Colors.lightBlue,
),
new Container(
width: 180.0,
color: Colors.amber,
),
new Container(
width: 180.0,
color: Colors.deepOrange,
),
new Container(
width: 180.0,
color: Colors.deepPurple,
),
],
);
}
}
横向列表和竖向列表最大的不同在于: scrollDirection
- Axis.vertical:默认值,竖向排列
- Axis.horizontal:水平排列
其次MyList做了一个简单地代码分离,代码可读性更高
动态列表
动态列表顾名思义,数据不是写死的也是我们在实际项目中常用的,比如我们的数据从后台读取过来,然后存入一个变量数组里,然后以数组的内容循环出一个列表,先上代码在解释:
import 'package:flutter/material.dart';
void main() => runApp(MyApp(
items:new List<String>.generate(1000, (i)=>"Item $i")
));
class MyApp extends StatelessWidget {
final List<String> items;
MyApp({Key key,@required this.items}): super(key : key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ListView widget',
home: Scaffold(
body: new ListView.builder(
itemCount: items.length,
itemBuilder: (context,index){
return new ListTile(
title: new Text('${items[index]}'),
);
},
),
),
);
}
}
首先我们先介绍数据的来源(当然我这的数据也是假的):
void main() => runApp(MyApp(
items:new List<String>.generate(1000, (i)=>"Item $i")
));
List类型的使用:
- var myList = List(): 非固定长度的声明。
- var myList = List(2): 固定长度的声明。
- var myList= List():固定类型的声明方式。
- var myList = [1,2,3]: 对List直接赋值。
我们使用的事List传递,然后直接用List方法中的generate产生List中的元素,最后产生一个带值的List数组
说明:再main函数的runApp中调用了MyApp类,再使用类的使用传递了一个items参数,并使用generate生成器对items进行赋值
generate方法传递两个参数,第一个参数是生成的个数,第二个是方法
参数传递完成,接下来我们看看怎么接收的:
接收参数
///final:只能被设一次值,在声明处赋值,值和普通变量的设值一样,可以是对象、字符串、数字等,用于修饰值的表达式不变的变量
///const:只能被设一次值,在声明处赋值,且值必须为编译时常量;用于修饰常量。
final List<String> items;
MyApp({Key key,@required this.items}): super(key : key);
MyApp(...)是一个构造函数,除了Key,我们增加了一个必传参数,这里的@required意思就必传。:super如果父类没有无名无参数的默认构造函数,则子类必须手动调用一个父类构造函数。
我们就可以接收一个传递过来的参数了,当然我们要事先进行声明
动态列表 ListView.builder()
body: new ListView.builder(
itemCount: items.length,
itemBuilder: (context,index){
return new ListTile(
title: new Text('${items[index]}'),
);
},
),
必填参数:
- itemCount:列表行数
- itemBuilder:内容绘制
当然还有很多可用参数:
- scrollDirection:滚动方向
- reverse:是否倒序
等等还有很多,等待大家使用,我这就不多介绍了
转载自:https://juejin.cn/post/6844903876227760141