Flutter 基础布局 Stack Widget </center>
Stack Widget布局类似于Android里的FrameLayout，里面的控件是按照先后顺序堆叠在一起的，有层级关系。
Stack 布局
我们可以看到布局都是叠在一起的。
Stack(
children: <Widget>[
Container(
width: 300,
height: 300,
color: Colors.grey,
),
Container(
width: 200,
height: 200,
color: Colors.blue,
),
Container(
width: 100,
height: 100,
color: Colors.teal,
),
Text(
"Stack",
style: TextStyle(color: Colors.white),
)
],
),
- 示例
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class StackExample extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return StackExampleState();
}
}
class StackExampleState extends State<StatefulWidget> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Stack Widget"),
primary: true,
),
body: Column(
children: <Widget>[
Stack(
children: <Widget>[
Container(
width: 300,
height: 300,
color: Colors.grey,
),
Container(
width: 200,
height: 200,
color: Colors.blue,
),
Container(
width: 100,
height: 100,
color: Colors.teal,
),
Text(
"Stack",
style: TextStyle(color: Colors.white),
)
],
),
],
),
);
}
}
image.png
Stack与Alignment
Stack组件的每一个子组件要么定位，要么不定位，Stack组件本身包含所有不定位的子组件，子组件根据alignment属性定位（默认为左上角）
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class StackAlignmentExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "StackAlignmentExample",
home: Scaffold(
appBar: AppBar(
title: Text("StackAlignmentExample"),
),
body: Center(
child: Stack(
alignment: Alignment.topLeft,
children: [
CircleAvatar(
backgroundImage: AssetImage("images/1.jpg"),
radius: 100.0,
),
Container(
decoration: BoxDecoration(color: Colors.black38),
child: Text(
"StackAlignment",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.white),
),
),
],
),
),
),
);
}
}
image.png
Stack与Positioned
Positioned组件用来定位的，Stack使用Positioned布局主要是因为在Stack组件里面需要包裹一个定位组件。
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class StackPositionedExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "StackPositionedExample",
home: Scaffold(
appBar: AppBar(
title: Text("StackPositionedExample"),
),
body: Center(
child: Stack(
children: [
Image.asset("images/1.jpg"),
Positioned(
bottom: 50.0,
right: 50.0,
child: Text(
"StackPositioned",
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.bold,
fontFamily: "serif",
color: Colors.white),
))
],
),
),
),
);
}
}
image.png
IndexedStack
IndexedStack继承自Stack，它的作用是显示第index个child，其他child都是不可见的所以IndexedStack的尺寸永远是和最大的子节点尺寸一致。
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class IndexedStackExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "IndexedStackExample",
home: Scaffold(
appBar: AppBar(
title: Text("IndexedStackExample"),
),
body: Center(
child: IndexedStack(
index: 0,
alignment: Alignment.topLeft,
children: [
CircleAvatar(
backgroundImage: AssetImage("images/1.jpg"),
radius: 100.0,
),
Container(
decoration: BoxDecoration(color: Colors.black38),
child: Text(
"IndexedStack",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.white),
),
),
],
),
),
),
);
}
}
- 可以看到文字不见了
image.png
