【Flutter&Dart】构建结构（1/100）

构建结构

没什么好先容的，训练构建而已；代码如下：

1. //绘制布局图
3. import 'package:flutter/material.dart';
5. class MyApp1 extends StatelessWidget {
6.   @override
7.   Widget build(BuildContext context) {
8.     Widget titleSection = Container(
9.       padding: const EdgeInsets.all(32.0),
10.       child: Row(
11.         children: [
12.           Expanded(
13.               child: Column(
14.             crossAxisAlignment: CrossAxisAlignment.start,
15.             children: [
16.               Container(
17.                 padding: const EdgeInsets.only(bottom: 8.0),
18.                 child: Text(
19.                   'Oeschinen Lake Campground',
20.                   style: TextStyle(fontWeight: FontWeight.bold),
21.                 ),
22.               ),
23.               Text(
24.                 'Kandersteg, Switzerland',
25.                 style: TextStyle(
26.                   color: Colors.grey[500],
27.                 ),
28.               )
29.             ],
30.           )),
31.           Icon(
32.             Icons.star,
33.             color: Colors.red[500],
34.           ),
35.           Text('41'),
36.         ],
37.       ),
38.     );
40.     Column buildButtonColumn(IconData icon, String label) {
41.       Color color = Theme.of(context).primaryColor;
43.       return Column(
44.         mainAxisSize: MainAxisSize.min,
45.         mainAxisAlignment: MainAxisAlignment.center,
46.         children: [
47.           Icon(
48.             icon,
49.             color: color,
50.           ),
51.           Container(
52.             margin: const EdgeInsets.only(top: 8.0),
53.             child: Text(
54.               label,
55.               style: TextStyle(
56.                   fontSize: 12.0, fontWeight: FontWeight.w400, color: color),
57.             ),
58.           )
59.         ],
60.       );
61.     }
63.     Widget buttonSection = Container(
64.       child: Row(
65.         mainAxisAlignment: MainAxisAlignment.spaceEvenly,
66.         children: [
67.           buildButtonColumn(Icons.call, 'CALL'),
68.           buildButtonColumn(Icons.near_me, 'ROUTE'),
69.           buildButtonColumn(Icons.share, 'SHARE'),
70.         ],
71.       ),
72.     );
73.     Widget textSection = Container(
74.       padding: const EdgeInsets.all(32.0),
75.       child: Text(
76.         '''
77. Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese Alps. Situated 1,578 meters above sea level, it is one of the larger Alpine Lakes. A gondola ride from Kandersteg, followed by a half-hour walk through pastures and pine forest, leads you to the lake, which warms to 20 degrees Celsius in the summer. Activities enjoyed here include rowing, and riding the summer toboggan run.
78.         ''',
79.         softWrap: true,
80.       ),
81.     );
83.     return MaterialApp(
84.       title: 'Flutter Demo',
85.       theme: ThemeData(
86.         primarySwatch: Colors.blue,
87.       ),
88.       home: Scaffold(
89.         body: ListView(
90.           children: [
91.             Image.asset(
92.               'images/smart_api.png',
93.               height: 240.0,
94.               fit: BoxFit.cover,
95.             ),
96.             titleSection,
97.             buttonSection,
98.             textSection,
99.           ],
100.         ),
101.       ),
102.     );
103.   }
104. }

复制代码

main.dart 入口调用如下：

1. import 'w3c/MyApp1.dart';
3. void main() {
4. //MyApp1
5.   runApp(MyApp1());
6.   }

复制代码

如果说还有啥，就是一点点设置了：
在 pubspec.yaml 里设置 assets images 资源图片

1. # The following section is specific to Flutter packages.
2. flutter:
4.   # The following line ensures that the Material Icons font is
5.   # included with your application, so that you can use the icons in
6.   # the material Icons class.
7.   uses-material-design: true
9.   # To add assets to your application, add an assets section, like this:
10.   assets:
11.     # - images/a_dot_burr.jpeg
12.     # - images/a_dot_ham.jpeg
13.     - images/smart_api.png

复制代码

还有就是在工程根目录预备 images 图片文件夹存放图片，如下图：

============END
如果对老师您有点用，用您发财的金手指点个赞