flutter 布局简介

 1 import 'package:flutter/material.dart';
 2 
 3 class LayoutDemo extends StatelessWidget {
 4   @override
 5   Widget build(BuildContext context) {
 6     return Column(
 7       mainAxisAlignment: MainAxisAlignment.center,
 8       children: <Widget>[
 9         // aspectratio会自动填充父元素宽度，根据设定的宽高比自动扩充高度。
10         AspectRatio(
11           aspectRatio: 16/9,
12           child: Container(
13             color: Colors.black87,
14           ),
15         ),
16         SizedBox(
17           height: 100,
18            200,
19           child: Container(
20             child: Icon(Icons.poll, size: 50),
21             alignment: Alignment.topRight,
22             decoration: BoxDecoration(
23               borderRadius: BorderRadius.circular(10),
24               gradient: LinearGradient(
25                 colors: [
26                   Color.fromRGBO(255, 75, 43, 0.9),
27                   Color.fromRGBO(255, 65, 108, 0.95),
28                 ],
29               ),
30               boxShadow: [
31                 BoxShadow(
32                   color: Colors.black87,
33                   offset: Offset(0, 10),
34                   blurRadius: 10,
35                   spreadRadius: -3
36                 )
37               ]
38             ),
39           ),
40         ),
41         // 这里的sizedbox可当divider用
42         SizedBox(
43           height: 20,
44         ),
45         SizedBox(
46           height: 100,
47            200,
48           child: Container(
49             decoration: BoxDecoration(
50               gradient: LinearGradient(
51                 colors: [
52                   Color.fromRGBO(255, 75, 43, 1),
53                   Color.fromRGBO(255, 65, 108, 1),
54                 ],
55               ),
56             ),
57           ),
58         )
59       ],
60     );
61   }
62 }
比较常用的就是Row()、Colmun()，具体的用法参考css的flexbox布局，比较相似。