<code>Stack({ Key? key, this.alignment = AlignmentDirectional.topStart, this.textDirection, this.fit = StackFit.loose, this.clipBehavior = Clip.hardEdge, List<Widget> children = const <Widget>[], })</code>
Stack:
alignment:作用于没有指定横轴或者纵轴位置的子元素。
fit:StackFit.loose--根据子元素大小显示;StackFit.expand会扩展到stack的大小。
<code>const Positioned({ Key? key, this.left, this.top, this.right, this.bottom, this.width, this.height, required Widget child, })</code>
left、width、right只能设置其中两个,同样top、height、bottom也是只能设置其中两个。
<code>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")) ], ), ); } }</code>
Hello world:没有指定位置,根据stack的alignment来布局.
I am Jack:横轴设置了left,纵轴没有设置,则也是根据stack的alignment来布局,居中显示。
Your friend:设置了纵轴top,横轴则以stack的alignment来布局,居中显示。
文章评论