Flutter常用组件—布局组件

布局组件-线性布局

• Column组件：用于实现纵向布局
• 常用属性：
  • children：存放要纵向布局的子组件
  • mainAxisAlignment：主轴(纵向)方向对齐方式
  • crossAxisAlignment：次轴(横向)方向对齐方式

import 'package:flutter/material.dart';
class ColumnWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('线性布局-Column'),
      ),
      body: Center(
        child: Container(
          color: Colors.yellow,
          width: 200.0, 
          height: 240.0,
          child: Column(
            // 主轴对齐方式
            // mainAxisAlignment: MainAxisAlignment.start,
            // 副轴对齐方式
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Image.asset(
                'assets/qiche.png' ,
                width: 200.0,
                height: 140.0,
                fit: BoxFit.cover,
              ),
              Padding(
                padding: EdgeInsets.only(top: 10.0),
                child: Text('发积分了发放机啥地方撒娇'),
              ),
              Padding(
                padding: EdgeInsets.only(top: 10.0),
                child: Text('99.9元'),
              )
            ],
          ),
        ),
      ),
    );
  }
}

布局组件-线性布局

• Row组件：用于实现横向布局
• 常用属性：
  • children：存放要纵向布局的子组件
  • mainAxisAlignment：主轴(横向)方向对齐方式
  • crossAxisAlignment：次轴(纵向)方向对齐方式

import 'package:flutter/material.dart';
class RowWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('线性布局-Row')),
      body: Center(
        child: Container(
          color: Colors.yellow,
          height: 100.0,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Image.asset(
                'assets/test.png',
                width: 86.0,
                height: 86.0,
                fit: BoxFit.cover,
              ),
              Padding(
                padding: EdgeInsets.only(right: 10.0),
                child: Text('分离式的看法；安防副书记发副经理说'),
              )
            ],
          ),
        ),
      ),
    );
  }
}

布局组件-弹性布局

• 弹性布局可以用于扩展和收缩内容，并以最大限度地填充可用空间
• 实现方式：Expanded组件
• 常用属性：
  • child：指定需要弹性布局的子组件
  • flex：弹性系数（指定组件间的内容比例）

import 'package:flutter/material.dart';

class ExpandedWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('弹性布局'),
      ),
      body: Center(
        child: Container(
          height: 100.0,
          color: Colors.yellow,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Expanded(
                flex: 1,
                child: Image.asset(
                  'assets/test.png',
                  width: 86.0,
                  height: 86.0,
                  fit: BoxFit.cover,
                ),
              ),

              // 弹性布局解决文字溢出问题
              Expanded(
                flex: 2,
                child: Padding(
                  padding: EdgeInsets.only(left: 10.0),
                  child: Text('分离式的看法；安防副书记发副经理说多少分分离式的看法；安防副书记发副经理说'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

布局组件-层叠布局

• 层叠布局可以让子组件根据父组件四个角的位置来确定自身的位置
• Flutter的层叠布局，也可以让子组件按照声明的顺序堆叠起来
• 实现方式：
  • Stack组件搭配Positioned组件：可以实现层叠布局（绝对定位）
  • Stack允许子组件堆叠，而Positioned用于根据Stack的四个角来确定子组件的位置
• 常用属性：
  • children：用于存放要布局的子组件
  • alignment：用于决定如何去对齐没有定位或部分定位的子组件

import 'package:flutter/material.dart';

class StackWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('层叠布局-Stack'),
      ),
      body: Center(
        child: Stack(
          alignment: Alignment.center,
          children: [
            Positioned(
              top: 105.0,
              child: Container(
                width: 200.0,
                height: 200.0,
                color: Colors.pink,
              ),
            ),
            Positioned(
              top: 0.0,
              child: Image.asset('assets/open_eyes.png'),
            )
          ],
        ),
      ),
    );
  }
}