Flutter组件学习五-页面布局 Row、Column、Expanded组件学习

115 阅读 0 评论 76 点赞

我是靠谱客的博主精明缘分，最近开发中收集的这篇文章主要介绍Flutter组件学习五-页面布局 Row、Column、Expanded组件学习，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

Flutter 页面布局 Row、Column、Expanded组件学习

1、自定义Icon

import 'package:flutter/material.dart';
class MyIcon extends StatelessWidget {
double size = 2;
IconData iconData;
Color backgroundColor = Colors.red;
Color iconColor = Colors.white;
// 设置一个必选参数，其他的是可选参数
MyIcon(this.iconData, {this.size, this.backgroundColor, this.iconColor});
@override
Widget build(BuildContext context) {
return Container(
height: 100,
width: 100,
color: this.backgroundColor,
child: Center(
child: Icon(this.iconData, size: this.size, color: this.iconColor),
),
);
}
}

使用

import 'package:flutter/material.dart';
import 'package:flutter_app/MyIcon.dart';
void main() => runApp(MyMaterialApp());
class MyMaterialApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: "test",
home: new Scaffold(
// 设置title
appBar: AppBar(title: Text("jeklsjflk")),
body: MyIcon(
Icons.home,
size: 20,
backgroundColor: Colors.yellow,
iconColor: Colors.red,
),
));
}
}

奇怪的是，不对可选参数进行赋值的话，MyIcon中属性的值不起作用。

2、Row

水平布局

2.1、属性说明

属性	说明
mainAxisAlignment	主轴的排序方式
crossAxisAlignment	次轴的排序方式
children	组件子元素

2.2、代码实现

//自定义的 Row，在Row中填充 MyIcon
class MyRow extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 600,
width: 400,
color: Colors.grey,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, //水平
crossAxisAlignment: CrossAxisAlignment.start, // 垂直
children: <Widget>[
MyIcon(
Icons.home,
size: 30,
backgroundColor: Colors.red,
iconColor: Colors.white,
),
MyIcon(
Icons.save,
size: 30,
backgroundColor: Colors.yellow,
iconColor: Colors.white,
),
MyIcon(
Icons.phone,
size: 30,
backgroundColor: Colors.green,
iconColor: Colors.white,
)
],
),
);
}
}

3、Column

垂直布局

3.1、属性说明

属性	说明
mainAxisAlignment	主轴的排序方式
crossAxisAlignment	次轴的排序方式
children	组件子元素

3.2、代码实现

//自定义 Column，在Row中填充 MyIcon
class MyColumn extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 600,
width: 400,
color: Colors.grey,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, //主轴
crossAxisAlignment: CrossAxisAlignment.center, // 次轴
children: <Widget>[
MyIcon(
Icons.home,
size: 30,
backgroundColor: Colors.red,
iconColor: Colors.white,
),
MyIcon(
Icons.save,
size: 30,
backgroundColor: Colors.yellow,
iconColor: Colors.white,
),
MyIcon(
Icons.phone,
size: 30,
backgroundColor: Colors.green,
iconColor: Colors.white,
)
],
),
);
}
}

4、Expanded

Expanded 类似 Web中的 Flex 布局。在 Row 和 Column 布局中使用

4.1、属性说明

属性	说明
flex	元素站整个父 Row /Column 的比例
child	子元素

4.2、代码实现

class MyExpanded extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Row(
children: <Widget>[
MyIcon(
Icons.save,
size: 30,
backgroundColor: Colors.yellow,
iconColor: Colors.white,
),
Expanded(
flex: 2,
child: MyIcon(
Icons.phone,
size: 30,
backgroundColor: Colors.green,
iconColor: Colors.white,
)),
MyIcon(
Icons.home,
size: 30,
backgroundColor: Colors.red,
iconColor: Colors.white,
),
],
),
);
}
}