【FlutterDart】构建布局（1/100）

构建布局

没什么好介绍的，练习构建而已；代码如下：

//绘制布局图import 'package:flutter/material.dart';class MyApp1 extends StatelessWidget {@overrideWidget build(BuildContext context) {Widget titleSection = Container(padding: const EdgeInsets.all(32.0),child: Row(children: [Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start,children: [Container(padding: const EdgeInsets.only(bottom: 8.0),child: Text('Oeschinen Lake Campground',style: TextStyle(fontWeight: FontWeight.bold),),),Text('Kandersteg, Switzerland',style: TextStyle(color: Colors.grey[500],),)],)),Icon(Icons.star,color: Colors.red[500],),Text('41'),],),);Column buildButtonColumn(IconData icon, String label) {Color color = Theme.of(context).primaryColor;return Column(mainAxisSize: MainAxisSize.min,mainAxisAlignment: MainAxisAlignment.center,children: [Icon(icon,color: color,),Container(margin: const EdgeInsets.only(top: 8.0),child: Text(label,style: TextStyle(fontSize: 12.0, fontWeight: FontWeight.w400, color: color),),)],);}Widget buttonSection = Container(child: Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [buildButtonColumn(Icons.call, 'CALL'),buildButtonColumn(Icons.near_me, 'ROUTE'),buildButtonColumn(Icons.share, 'SHARE'),],),);Widget textSection = Container(padding: const EdgeInsets.all(32.0),child: Text('''
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.''',softWrap: true,),);return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(body: ListView(children: [Image.asset('images/smart_api.png',height: 240.0,fit: BoxFit.cover,),titleSection,buttonSection,textSection,],),),);}
}

main.dart 入口调用如下：

import 'w3c/MyApp1.dart';void main() {
//MyApp1runApp(MyApp1());}

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

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

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

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

另外宣传一下自研的 smartApi 开发工具，正在紧张的开发进行中。。。。敬请期待哦！
主要是市面上那些 Api 调试工具太难用了，稍微好用一点的又性能消耗巨大