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,
          ),
        ],
      ),
    );
  }
}