一、Column
import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("布局练习"),
),
body: Container(
color: Colors.grey,
child: Column(
verticalDirection: VerticalDirection.up,
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
color: Colors.red,
height: 100,
width: 100,
),
Container(
color: Colors.green,
height: 200,
width: 150,
),
Container(
color: Colors.yellow,
height: 100,
width: 100,
),
],
),
)
);
}
}
二、Row同上
三、Flex
import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("布局练习"),
),
body: Flex(
direction: Axis.vertical,
children: [
Expanded(
child: Container(
color: Colors.red,
height: 100,
width: 200,
),
flex: 1,
),
Expanded(
child: Container(
color: Colors.green,
height: 100,
width: 200,
),
flex: 2,
),
Expanded(
child: Container(
color: Colors.yellow,
height: 100,
width: 200,
),
flex: 1,
),
],
)
);
}
}
四、Wrap
import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("布局练习"),
),
body: Container(
child: WrapDemo(),
)
);
}
}
class ErrorDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
children: [
Text("data" * 200)
],
);
}
}
class WrapDemo extends StatefulWidget {
@override
_WrapDemoState createState() => _WrapDemoState();
}
class _WrapDemoState extends State<WrapDemo> {
List<int> list = [];
@override
void initState() {
super.initState();
for(int i = 0; i < 200; ++i) {
list.add(i);
}
}
@override
Widget build(BuildContext context) {
return Wrap(
direction: Axis.vertical,
alignment: WrapAlignment.end,
spacing: 1,
runSpacing: 1,
children: list.map((e) => Container(
height: 10,
width: 10,
child: Text(e.toString()),
color: Colors.blue,
)).toList(),
);
}
}
五、Stack
import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("布局练习"),
),
body: Container(
width: double.infinity,
color: Colors.grey,
child: StackDemo(),
)
);
}
}
class StackDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Stack(
alignment: AlignmentDirectional.topEnd,
children: [
Container(
color: Colors.green,
height: 100,
width: 100,
),
Container(
color: Colors.red,
height: 50,
width: 50,
),
],
);
}
}
六、Positioned
import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("布局练习"),
),
body: Container(
width: double.infinity,
color: Colors.grey,
child: StackDemo(),
)
);
}
}
class StackDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Stack(
alignment: AlignmentDirectional.topEnd,
children: [
Container(
color: Colors.green,
height: 100,
width: 100,
),
Container(
color: Colors.red,
height: 50,
width: 50,
),
Positioned(
top: 10,
bottom: 20,
left: 30,
right: 40,
child: Container(
color: Colors.yellow,
height: 50,
width: 50,
)
)
],
);
}
}
七、Align
import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("布局练习"),
),
body: Container(
color: Colors.grey,
child: AlignDemo()
)
);
}
}
class AlignDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.blue,
height: 100,
width: 100,
child: Align(
alignment: Alignment(-1, 0.5),
child: Container(
color: Colors.green,
width: 20,
height: 20,
),
),
);
}
}