【笔记】Flutter的Positioned定位组件

发表于 更新于 分类于 阅读次数：

前言

Flutter的Positioned定位组件学习笔记

Positioned定位组件

  • Positioned相对于外部容器进行定位，如果没有外部容器就相对于整个屏幕进行定位
  • 如果Positioned中子元素没有宽高，需要通过width和height指定子元素的宽高
    • 在Positioned中不能指定无穷大值作为子元素的宽高，需要借助MediaQuery.of(context).size获取屏幕的尺寸

width：子组件的宽度
height：子组件的高度
left：子组件的左边距
right：子组件的右边距
top：子组件的上边距
bottom：子组件的下边距

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text("文本内容"),
      ),
      body: const App(),
    ),
  ));
}

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      color: Colors.red,
      child: Stack(
        children: [
          Positioned(
              left: 0,
              bottom: 0,
              child: Container(
                width: 100,
                height: 100,
                color: Colors.yellow,
              ))
        ],
      ),
    );
  }
}

完成

参考文献

哔哩哔哩——筱筱知晓