Stack组件结合Align组件使用,实现对每个子组件分别进行定位
import 'package:flutter/material.dart';
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("首页"),
centerTitle: true,
),
body: HomeBody()
);
}
}
class HomeBody extends StatefulWidget {
@override
_HomeBodyState createState() => _HomeBodyState();
}
class _HomeBodyState extends State <HomeBody> {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: 400,
height: 400,
color: Colors.red,
child: Stack(
children: [
Align(
alignment: Alignment.topCenter,
child: Icon(Icons.home,size: 40,color: Colors.white,)
),
Align(
alignment: Alignment(0,0),
child: Icon(Icons.home,size: 60,color: Colors.blue,)
),
Align(
alignment: Alignment(1,1),
child: Icon(Icons.home,size: 50,color: Colors.green,)
),
],
),
),
);
}
}
Stack组件结合Positioned组件使用,实现对每个子组件分别进行定位
import 'package:flutter/material.dart';
import 'package:douban_demo/network/http_request.dart';
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("首页"),
centerTitle: true,
),
body: HomeBody()
);
}
}
class HomeBody extends StatefulWidget {
@override
_HomeBodyState createState() => _HomeBodyState();
}
class _HomeBodyState extends State <HomeBody> {
@override
void initState() {
print("进入首页init");
super.initState();
}
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: 400,
height: 400,
color: Colors.red,
child: Stack(
children: [
Positioned(
top: 0,
left:10,
child: Icon(Icons.home,size: 40,color: Colors.white,)
),
Positioned(
bottom: 0,
left: 100,
child: Icon(Icons.home,size: 60,color: Colors.blue,)
),
Positioned(
top: 200,
left: 200,
child: Icon(Icons.home,size: 50,color: Colors.green,)
),
],
),
),
);
}
}