Stack 布局

Stack 布局.png

Stack 层叠布局允许子组件按照声明的顺序堆叠起来，使用Positioned封装子组件实现自身相对于父元素各个边的精确的定位。

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    debugShowCheckedModeBanner: false,
    home: LayoutWidget(),
  ));
}

class LayoutWidget extends StatefulWidget {
  const LayoutWidget({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _LayoutState();
}

class _LayoutState extends State<LayoutWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Stack 布局'),
        ),
        body: ConstrainedBox(
          constraints: const BoxConstraints.expand(),
          child: Stack(
            //指定组件未定位方向上的定位方式
            alignment: Alignment.center,
            //超出部分裁剪方式, 一般默认直接裁剪
            clipBehavior: Clip.hardEdge,
            //没有定位的子组件如何去适应Stack的大小
            //fit: StackFit.expand,
            children: <Widget>[
              Container(
                color: Colors.red,
                child: const Text("你          好",
                    style: TextStyle(color: Colors.white)),
              ),
              Container(
                color: Colors.red,
                child: const Text(
                  "哈哈",
                ),
              ),
              const Positioned(
                //左方定位上下未定
                left: 18.0,
                child: Text("Flutter"),
              ),
              const Positioned(
                //上方定位左右未定
                top: 18.0,
                child: Text("Java"),
              )
            ],
          ),
        ));
  }
}