自己这几天心血来潮看了一下Flutter，用了一天的时间去装环境，一天的时间去运行了一些官方的demo，对Flutter开发逐渐开始有了一点信心，加上之前Web开发经验，我认为使用Flutter还是挺简单的
萌新起步，大佬绕道
先上一张图：
Screenshot_20190118-192415.jpg
我们拆分一下flutter样式结构，其实由五个Widget组成：
1.图片Widget
2.文本+图标+数字Widget
3.3个图标Widget
4.rich-text文本框
5.还算上一个大的app样式，也算一个Widget
然后自然就是对各个部件进行修改，然后拼凑到一起：
1.titleSection：
Widget titleSection = new Container(
padding: const EdgeInsets.all(32),
child: new Row(
children: <Widget>[
new Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(
padding: const EdgeInsets.only(bottom: 8),
child: new Text(
'Oeschinen Lake Campground',
style: new TextStyle(
fontWeight: FontWeight.bold
),
),
),
new Text(
'Kandersteg, Switzerland',
style: new TextStyle(
color: Colors.grey[500]
),
)
],
)
),
new Icon(
Icons.star,
color: Colors.grey[500],
),
new Text('41'),
],
),
);
2.buildButtonColumn
Column buildButtonColumn(IconData icon, String label){
Color color = Theme.of(context).primaryColor;
return new Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Icon(icon, color: color,),
new Container(
margin: const EdgeInsets.only(top: 8),
child: new Text(
label,
style: new TextStyle(
fontSize: 12,
fontWeight: FontWeight.w400,
color: color
),
),
)
],
);
}
//构建一整个行的图标
Widget buttonSection = new Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
buildButtonColumn(Icons.call, 'CALL'),
buildButtonColumn(Icons.near_me, 'ROUTE'),
buildButtonColumn(Icons.share, 'SHARE')
],
),
);
这里要特别注意一下,其实三个Icon的样式是一样的，那么只要写了其中一个样式，其他样式是可以通过模板套出来的，所以这里首先声明了一个build函数，在函数内部写好样式，最后只需要传入一个图标形状和title就行了
3.textSection
Widget textSection = new Container(
padding: const EdgeInsets.all(32),
child: new 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,
),
);
4.最后的整合
全部代码如下：
//Flutter demo
import 'package:flutter/material.dart';
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
Widget titleSection = new Container(
padding: const EdgeInsets.all(32),
child: new Row(
children: <Widget>[
new Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(
padding: const EdgeInsets.only(bottom: 8),
child: new Text(
'Oeschinen Lake Campground',
style: new TextStyle(
fontWeight: FontWeight.bold
),
),
),
new Text(
'Kandersteg, Switzerland',
style: new TextStyle(
color: Colors.grey[500]
),
)
],
)
),
new Icon(
Icons.star,
color: Colors.grey[500],
),
new Text('41'),
],
),
);
//构建一个button列
Column buildButtonColumn(IconData icon, String label){
Color color = Theme.of(context).primaryColor;
return new Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Icon(icon, color: color,),
new Container(
margin: const EdgeInsets.only(top: 8),
child: new Text(
label,
style: new TextStyle(
fontSize: 12,
fontWeight: FontWeight.w400,
color: color
),
),
)
],
);
}
//构建一整个行的图标
Widget buttonSection = new Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
buildButtonColumn(Icons.call, 'CALL'),
buildButtonColumn(Icons.near_me, 'ROUTE'),
buildButtonColumn(Icons.share, 'SHARE')
],
),
);
Widget textSection = new Container(
padding: const EdgeInsets.all(32),
child: new 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 new MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
body: new ListView(
children: <Widget>[
new Image.asset(
'img/1538884465345.jpg',
height: 240,
width: 600,
fit: BoxFit.cover,
),
//这里将之前定义的标题，按钮和文本元素都放入主部件中进行渲染
titleSection,
buttonSection,
textSection
],
),
),
theme: new ThemeData(
primarySwatch: Colors.blue
),
);
}
}
//The main programme
void main() => runApp(MyApp());
网友评论