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

最新推荐文章于 2024-11-15 18:17:48 发布

优小U

最新推荐文章于 2024-11-15 18:17:48 发布

阅读量615

点赞数

分类专栏： Flutter 文章标签： flutter android stack positioned

本文为博主原创文章，未经博主允许不得转载，违者必究。

本文链接：https://blog.youkuaiyun.com/zy1281539626/article/details/128993598

版权

Flutter 专栏收录该内容

12 篇文章

订阅专栏

文章介绍了Flutter中使用Stack和Positioned组件来实现类似Web中的绝对定位和AndroidFrame布局的效果。Stack允许子组件堆叠，Positioned则用于根据Stack的坐标设置子组件的位置。示例代码展示了一个包含两个FlutterLogo和一个定位文本的Stack布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

层叠布局和 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("定位元素"),
            )
          ],
        )
      )
    );
  }
}