Flutter组件（Stack）

Stack组件

stack可以容纳多个组件，以叠加的方式摆放子组件，后者居上。拥有Alignment属性，可以与Positioned组件联合使用，精准并有效摆放。同Android端FramLayout布局相似。

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

示例代码：
alignment: Alignment.center,直接在stack中设置是让stack中所有子组件居中，在下面示例中stack中放置了三个组件，第二三个组件Text摆在了第一个组件Container上，我们设置了居中属性，两个文本重叠居中，而Container在左上角，刚开始时我误以为居中是相对于整个屏幕居中，后来演示代码时发现不对，在这里我的理解是内部所有组件居中是相对于最外层容器组件组件居中

// ignore_for_file: prefer_const_constructors, prefer_collection_literals, deprecated_member_use, unused_local_variable, must_be_immutable

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo'),
        ),
        body: HomeContent(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  const HomeContent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: [
        Container(
          height: 400,
          width: 300,
          color: Colors.red,
        ),
        Text("我是一个文本"),
        Text("我也是文本")
      ],
    );
  }
}

Align

当容器内有多个组件时，通过上面的方法设置组件相对位置显然不行。
Stack 组件中结合 Align 组件可以控制每个子元素的显示位置

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

对内部的每一个组件嵌套一个Align组件，方位都是相对于最外部的容器组件的

// ignore_for_file: prefer_const_constructors, prefer_collection_literals, deprecated_member_use, unused_local_variable, must_be_immutable

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo'),
        ),
        body: HomeContent(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  const HomeContent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 400,
      width: 300,
      color: Colors.red,
      child: Stack(
        children: const [
          Align(
            alignment: Alignment.topLeft,
            child: Icon(Icons.home,size: 40,color: Colors.white),
          ),
           Align(
            alignment: Alignment.center,
            child: Icon(Icons.home,size: 30,color: Colors.white),
          ),
           Align(
            alignment: Alignment.bottomRight,
            child: Icon(Icons.home,size: 30,color: Colors.white),
          )
        ],
      ),
    );
  }
}

Positioned

Stack 组件中结合 Positioned 组件也可以控制每个子元素的显示位置

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

// ignore_for_file: prefer_const_constructors, prefer_collection_literals, deprecated_member_use, unused_local_variable, must_be_immutable

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo'),
        ),
        body: HomeContent(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  const HomeContent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 400,
      width: 300,
      color: Colors.red,
      child: Stack(
        children: const [
         Positioned(
            left: 10,
            child: Icon(Icons.home,size: 40,color: Colors.white),
          ),
           Positioned(
            bottom: 0,
            left: 100,
            child: Icon(Icons.home,size: 30,color: Colors.white),
          ),
           Positioned(
            right: 0,
            child: Icon(Icons.home,size: 30,color: Colors.white),
          )
        ],
      ),
    );
  }
}