Flutter中Stack和Position简单例子

效果图：

Stack({
    Key? key,
    this.alignment = AlignmentDirectional.topStart,
    this.textDirection,
    this.fit = StackFit.loose,
    this.clipBehavior = Clip.hardEdge,
    List<Widget> children = const <Widget>[],
  })

Stack:
alignment：作用于没有指定横轴或者纵轴位置的子元素。
fit：StackFit.loose--根据子元素大小显示；StackFit.expand会扩展到stack的大小。

const Positioned({
    Key? key,
    this.left,
    this.top,
    this.right,
    this.bottom,
    this.width,
    this.height,
    required Widget child,
  })

left、width、right只能设置其中两个，同样top、height、bottom也是只能设置其中两个。

import 'package:flutter/material.dart';

main()=>runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Stack和Position"),
          centerTitle: true,
        ),
        body: const MyHomePage()
      ),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  DateTime? _dateTime;

  @override
  Widget build(BuildContext context) {
    return ConstrainedBox(
      constraints: const BoxConstraints.expand(),
      child: Stack(
        alignment: Alignment.center,
        children: [
          Container(
            color: Colors.red,
            child: const Text("Hello world",style: TextStyle(color: Colors.white)),
          ),
          const Positioned(
              left: 18,
              child: Text("I am Jack")
          ),
          const Positioned(
            top: 18,
              child: Text("Your friend"))
        ],
      ),
    );
  }
}

Hello world：没有指定位置，根据stack的alignment来布局.
I am Jack：横轴设置了left,纵轴没有设置，则也是根据stack的alignment来布局，居中显示。
Your friend：设置了纵轴top，横轴则以stack的alignment来布局，居中显示。