Flutter 页面层叠组件与定位组件

Flutter Stack组件

Stack表示堆的意思,我们可以用Stack或者Stack结合Align或者Stack结合Postitiond来实现页面的定位布局

属性	说明
alignment	配置所有子元素的显示位置
children	子组件

Stack组件,可以让组件下children内的所有组件进行堆叠.再通过alignment属性来设置堆叠布局的位置
简单看一个Stack堆叠

import 'package:flutter/material.dart';
class StackPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'stack page',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stack Page')
        ),
        body: PageWidget()
      ),
    );
  }
}

class PageWidget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,  //- Stack 下的所有元素都以中心对齐堆叠
      children: [
        Container(
          width:300.0,
          height:400.0,
          color: Colors.orangeAccent,
        ),
        Container(
          width:100.0,
          height:150.0,
          color: Colors.pinkAccent
        ),
        Text('我是文本'),  //- 文本在最下面加载,才能够显示在最上面,如果顺序不同,可能文字被其他区块遮挡
      ],
    );
  }
}

页面效果:

image.png

上面的demo中,我们使用了一个关键属性alignment,具体排列可以参考Alignment下的方位属性.当然我们也可以不使用Alignment的方位属性,可以使用Alignment指定方位.需要直接实例化Alignment()这个类,传入X,Y的值.区间为-1 到 1.对应X轴和Y轴的坐标位置.

class PageWidget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment(1,1),  //- Alignment()实例化类传入XY的坐标,区间为-1 到 1
      children: [
        Container(
          width:300.0,
          height:400.0,
          color: Colors.orangeAccent,
        ),
        Container(
          width:100.0,
          height:150.0,
          color: Colors.pinkAccent
        ),
        Text('我是文本'),  //- 文本在最下面加载,才能够显示在最上面,如果顺序不同,可能文字被其他区块遮挡
      ],
    );
  }
}

我们设置Alignment实例化类里传入1,1对应为X轴和Y轴最大值.那么应该是右下角.手机上显示为:

image.png

容器内有多个元素需要定位

我们在使用Stack组件进行子组件布局的时候,没法对单一组件进行定位.这个时候我们就需要使用Stack结合Align或者Positioned属性进行实现.

Stack配合Align实现单一子组件定位:

属性	说明
alignment	配置所有子元素的显示位置
child	子组件

class PageWidget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      height:400.0,
      width: 300.0,
      color:Colors.orangeAccent,
      child: Stack(
        children: [
          Align(
            alignment: Alignment.topCenter,
            child: Icon(Icons.home, size: 40, color: Colors.white),
          ),
          Align(
            alignment: Alignment(0.7, 1),
            child: Icon(Icons.search, size: 30, color: Colors.blue),
          ),
          Align(
            alignment: Alignment(0, 0),
            child: Icon(Icons.bubble_chart, size: 80, color: Colors.red),
          ),
          Align(
            alignment: Alignment.centerLeft,
            child: Container(
              width:80.0,
              height:160.0,
              color: Colors.blueGrey
            ),
          ) 
        ],
      ),
    );
  }
}

实现效果:

image.png

Stack配合Align实现单一子组件定位:

属性	说明
top	子元素距离顶部的距离
bottom	子元素距离底部的距离
left	子元素距离左边的距离
right	子元素距离右边的距离
child	子组件

代码:

class PageWidget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      height:400.0,
      width: 300.0,
      color:Colors.orangeAccent,
      child: Stack(
        children: [
          Positioned(
            left:10,
            child: Icon(Icons.home, size: 40, color: Colors.white),
          ),
          Positioned(
            bottom: 50,
            child: Icon(Icons.search, size: 30, color: Colors.blue),
          ),
          Positioned(
            bottom: 100,
            child: Icon(Icons.bubble_chart, size: 80, color: Colors.red),
          ),
          Positioned(
            left:50,
            top:50,
            child: Container(
              width:80.0,
              height:160.0,
              color: Colors.blueGrey
            ),
          ) 
        ],
      ),
    );
  }
}

页面效果:

image.png