【Flutter -- 布局】层叠布局(Stack和Positioned)

在这里插入图片描述

Flutter 中使用 Stack 和 Positioned 这两个组件来配合实现绝对定位。Stack 允许子组件堆叠,而 Positioned 用于根据 Stack 的四个角来确定子组件的位置。

Stack

1. 简介

Stack 可以类比 web 中的 absolute,绝对布局。绝对布局一般在移动端开发中用的较少,但是在某些场景下,还是有其作用。当然,能用 Stack 绝对布局完成的,用其他控件组合也都能实现。

2. 属性

alignment:对齐方式,默认是左上角(topStart)。

textDirection:文本的方向,绝大部分不需要处理。

fit:定义如何设置non-positioned节点尺寸,默认为loose。

其中StackFit有如下几种:

  • loose:子节点宽松的取值,可以从min到max的尺寸;
  • expand:子节点尽可能的占用空间,取max尺寸;
  • passthrough:不改变子节点的约束条件。

overflow:超过的部分是否裁剪掉(clipped)。

3. 实例

1. 效果图

在这里插入图片描述

3. 代码

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
        title: 'Welcome to Flutter',

        home: Scaffold(
            appBar: AppBar(
              title: Text('层叠布局'),
            ),
            body: Center(
              child: Stack(
                alignment: const Alignment(0.6, 0.6),
                children: <Widget>[
                  CircleAvatar(
                    backgroundImage: AssetImage('images/avatar.png'),
                    radius: 100.0,
                  ),

                  Container(
                    decoration: BoxDecoration(
                      color: Colors.black45
                    ),
                    child: Text(
                      'KevinDev',
                      style: TextStyle(
                        fontSize: 20.0,
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                      ),
                    ),
                  )
                ],
              ),
            )
        )
    );
  }
}

Positioned

1. 简介

绝对定位,用于确定子组件的位置

2. 属性

left、top、right、bottom:他们分别代表离 Stack 左、上、右、下四边的距离。

width、height:指定需要定位元素的宽度和高度。

注:Positioned的width、height和其它地方的意义稍微有点区别,此处用于配合left、top 、right、 bottom来定位组件,

3. 实例

1. 效果图

在这里插入图片描述

2. 代码

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
        title: 'Welcome to Flutter',

        home: Scaffold(
            appBar: AppBar(
              title: Text('层叠布局'),
            ),
            body: ConstrainedBox(
              constraints: BoxConstraints.expand(),
              child: Stack(
                alignment:Alignment.center , //指定未定位或部分定位widget的对齐方式
                children: <Widget>[
                  Container(
                    child: Text("Hello world",style: TextStyle(color: Colors.white)),
                    color: Colors.blue,
                  ),
                  Positioned(
                    left: 18.0,
                    child: Text("I am Kevin"),
                  ),
                  Positioned(
                    top: 18.0,
                    child: Text("Your friend"),
                  )
                ],
              ),
            )
        )
    );
  }
}

猜你喜欢

转载自blog.csdn.net/duoduo_11011/article/details/125887284