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来布局,居中显示。
文章评论