Flutter Padding组件
在Flutter中,不是所有的组件都有padding属性来控制元素内不间距的.我们就可以通过Flutter为我们提供的Padding组件来实现
| 属性 | 说明 |
|---|---|
| padding | padding 值,EdgeInsetss 设置填充的值 |
| child | 子组件 |
下面我们通过一个GridView不通过横向和竖向间距的属性达到给GridView下的内容进行隔离开.
实现逻辑:
1.对GridView下的子组件添加Padding组件,设置左边距10,上边距10.(此时会发现最右边的子元素紧贴着手机屏幕边缘)
2.对GridView外层添加Padding组件,设置右边距,达到视觉间隔的效果
实现效果如下:
image.png
代码:
import "package:flutter/material.dart";
class Demo01 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '练习页面',
home: Scaffold(
appBar: AppBar(
title: Text('练习页面')
),
body: Container(
child: GetGridViewList()
)
),
);
}
}
class GetGridViewList extends StatelessWidget {
@override
Widget build(BuildContext context) {
List imageList = [
'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=158710161,3575221320&fm=26&gp=0.jpg',
'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=158710161,3575221320&fm=26&gp=0.jpg',
'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=158710161,3575221320&fm=26&gp=0.jpg',
'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=158710161,3575221320&fm=26&gp=0.jpg',
'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=158710161,3575221320&fm=26&gp=0.jpg',
'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=158710161,3575221320&fm=26&gp=0.jpg',
'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=158710161,3575221320&fm=26&gp=0.jpg',
];
Widget _getImageList(context, index) {
return Container(
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0), // 给图片组件的左和上添加10的padding距离
child: Image.network(imageList[index], fit: BoxFit.cover)
)
],
)
);
}
return Padding(
//- EdgeInsets.fromLTRB 4个参数分别是左,上,右,下
padding: EdgeInsets.fromLTRB(0, 0, 10, 0), //- 对整个GridView添加一个右边距
child: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2, //- 一行的Widget 数量,
childAspectRatio: 1.44, //- 设置宽度和高度的比例
),
itemCount: imageList.length,
itemBuilder: _getImageList,
)
);
}
}
自定义按钮组件(参数传递)
在讲Row组件和Column组件之前,我们先看一下组件之间的参数传递以及构造函数的使用(必传参数和可选参数)
通过参数传递,调用IconContainer组件实现每次调用可以传入不同的值,显示不同的图标以及颜色和大小
import 'package:flutter/material.dart';
class RowAndColumnPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Row and Column",
home: Scaffold(
appBar: AppBar(
title: Text('Row and Clumn'),
),
body: Column(
children: <Widget>[
RowWidget(), //- Row 组件展示
],
)
)
);
}
}
class RowWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return IconContainer(Icons.home, color: Colors.green);
}
}
class IconContainer extends StatelessWidget {
// 定义一个构造函数,把图标,大小,颜色进行动态传入接收
// size和color为可选参数,我们设置一个默认值
double size = 32.0;
Color color = Colors.orangeAccent;
IconData icon;
IconContainer(this.icon,{this.color, this.size}); //- 这种写法表示icon为必填参数, color和size为可选参数
@override
Widget build(BuildContext context) {
return Container(
width: 100.0,
height: 100.0,
color: this.color,
child: Center(
child: Icon(this.icon, size: this.size, color: Colors.white)
)
);
}
}
Flutter Row组件
水平布局组件
| 属性 | 说明 |
|---|---|
| mainAxisAlignment | 主轴的排序方式 |
| crossAxisAlignment | 次轴的排序方式 |
| children | 组件子元素 |
我们结合前面的例子,RowWidget组件现在需要多次调用IconContainer组件,传入不同的参数,这个时候使用Row组件来实现,其中Row组件下的children属性允许我们传入一个List<Widget>.
class RowWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
IconContainer(Icons.home, color: Colors.green),
IconContainer(Icons.arrow_forward, color: Colors.blueGrey),
IconContainer(Icons.adjust, color: Colors.deepOrange),
],
);
}
}
这样就简单的实现了调用IconContainer组件传入不同的参数,通过Row组件进行横向布局.页面效果:
image.png
设置主轴属性 mainAxisAlignment
下面介绍一下 mainAxisAlignment属性,通过MainAxisAlignment调用会发现下面还有一些属性,例如center
image.png
这里列举一下各个属性的显示样式:
start
image.png
center
image.png
end
image.png
spaceAround(元素之间的距离是页面边距离的两倍)
image.png
spaceBetween
image.png
spaceEvenly
image.png
设置次轴属性 crossAxisAlignment
前面的例子中,只有一行横向位置,无法体现出crossAxisAlignment属性的效果,我们在Row外面套一层容器,并设置高和宽之后,通过crossAxisAlignment次轴属性来在横向布局的纵向进行操作.
class RowWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 300.0,
width: 400.0,
color: Colors.lightBlue,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
IconContainer(Icons.home, color: Colors.green),
IconContainer(Icons.arrow_forward, color: Colors.blueGrey),
IconContainer(Icons.adjust, color: Colors.deepOrange)
],
),
);
}
}
上面的代码在外层设置了容器后,显示如下:
image.png
同样,我们调用次轴属性后依然会有很多属性选择
image.png
简单方便理解的使用表格说明一下,特殊的采用图文的形式表达:
| 属性 | 说明 |
|---|---|
| center | 次轴居中 |
| start | 次轴靠前(当前是Row组件所以是靠上显示) |
| end | 次轴靠后(当前是Row组件所以是靠下显示) |
CrossAxisAlignment.stretch(次轴占满整个屏幕)
image.png
Flutter Column组件
垂直布局组件
| 属性 | 说明 |
|---|---|
| mainAxisAlignment | 主轴的排序方式 |
| crossAxisAlignment | 次轴的排序方式 |
| children | 组件子元素 |
垂直布局组件Column用法与Row组件用法相同,注意主轴和次轴对应的方向使用既可.
Flutter Expanded 类似Web中的Flex
Expanded 组件可以用在Row 和Column布局中
| 属性 | 说明 |
|---|---|
| flex | 元素占整个父Row/Column的比例 |
| chile | 子元素 |
我们在实际项目中经常会遇到一个情况,左边一个区块显示图片,右边是新闻标题.但是左边的图片位置的剩余部分的全部宽度都要显示为文字区域.
效果如下:
image.png
我们可以采用
Expanded把元素包起来,并设置flex属性来解决就可以了
import 'package:flutter/material.dart';
class RowAndColumnPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Row and Column",
home: Scaffold(
appBar: AppBar(
title: Text('Row and Clumn'),
),
body: Column(
children: <Widget>[
RowWidget(), //- Row 组件展示
],
)
)
);
}
}
class RowWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Container(
width:100.0,
height:100.0,
child: Image.network(
'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=158710161,3575221320&fm=26&gp=0.jpg',
fit: BoxFit.cover
),
),
Expanded(
flex: 1,
child: ListTile(
title: Text('这里是新闻的标题这里是新闻的标题这里是新闻的标题',overflow: TextOverflow.ellipsis,),
subtitle: Text('这里是副标题这里是副标题这里是副标题这里是副标题这里是副标题这里是副标题这里是副标题这里是副标题这里是副标题这里是副标题', overflow: TextOverflow.ellipsis,maxLines: 2)
)
),
],
);
}
}
