Flutter Widget - Stack and Positioned 层叠绝对定位

Posted 2023-03-03 优小U

层叠布局和 Web 中的absolute绝对定位、android 中的 Frame 布局是相似的，子组件可以根据距父容器四个角的位置来确定自身的位置。层叠布局允许子组件按照代码中声明的顺序堆叠起来。Flutter中使用 Stack 和 Positioned 这两个组件来配合实现绝对定位。Stack 允许子组件堆叠，而 Positioned 用于根据 Stack 的四个角来确定子组件的位置。

Stack

• alignment 没有定位或部分定位的子组件的对齐方式
• textDirection 确定alignment对齐的参考系
• children 子组件列表
• fit 确定没有定位的子组件如何去适应Stack的大小。StackFit.loose表示使用子组件的大小，StackFit.expand表示扩伸到Stack的大小。
• clipBehavior 对超出Stack显示空间的部分如何剪裁
• hashCode
• key
• runtimeType

Positioned

• child 定位元素
• width 宽
• height 高
• left 距离左边偏移
• right 距离右边边偏移
• top 距离顶部偏移
• bottom 距离底部偏移
• debugTypicalAncestorWidgetClass
• hashCode
• key
• runtimeType

import 'package:flutter/material.dart';

void main() 
  runApp(const MyApp());


class MyApp extends StatelessWidget 
  const MyApp(super.key);

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Container 容器'),
        ),
        body: Stack(
          alignment: Alignment.centerRight,
          fit: StackFit.loose,
          clipBehavior: Clip.hardEdge,
          children: const <Widget>[
            FlutterLogo(size: 200,),
            FlutterLogo(size: 60, style: FlutterLogoStyle.stacked),
            Positioned(
              width: 100,
              height: 100,
              top: 0,
              left: 0,
              child: Text("定位元素"),
            )
          ],
        )
      )
    );
  

实现效果：