本文作者分享了使用Flutter在三天内模仿美团App的实战经验，探讨了Flutter的特性和优势，并展示了项目的框架设计与代码实现，包括底部导航栏的自定义以及页面切换效果。
Flutter学习三天搞定项目
如图下：
一，Flutter:
Flutter和“ReactNative”，我想很多作为android和前端或者ios开发人员都听说过，我们可以JavaScript和React获得一致的开发体验，但是RN在实际平台上还需要适配和桥接差异性，这个过程其实很痛苦的。而Flutter则是依靠Flutter Engine虚拟机在iOS和Android上运行，开发人员可以通过Flutter框架和API在内部进行交互。Flutter Engine使用C/C++编写，具有低延迟输入和高帧速率的特点。除此之外，Flutter提供了自己的小部件集合，可以直接在OS平台提供的画布上描绘控件。可以说实际意义上的一个语言实现多平台运行。
二，学习三天的我写的Demon并且开始开发项目：
我也是上一周听到几个android群里讨论Flutter的，各种天花乱坠，有些说嵌套很麻烦，我想是不是和前端有点像，有些说提供的框架和第三方不完善，或者说迟早gg,当然了，有一个大佬说看了一个月，也分享了他的博客，我第一时间是看了他的Demon，我当时想上手一个月是不是很难了。接下来我就直接奔着官方网站去进行阅读，当然了搭建环境这个环境我没算到学习时间之内，一步步按照官方API阅读并去写代码。我阅读过程中发现，哇这借鉴了web前端的很多特点，小部件盒子模型，以及熟悉的书写格式bootmstrup这让我很快的用一个早上搞定了小部件部分。而且写了很多的案例。我发现布局流程图如果理解了很好写布局，不存在嵌套太导致思路模糊或者找不见问题。我希望直接入手光放API。最快最直接，最明白。
写了一天半Demon如下图所示：
当我注重看Flutter框架设计时候，官方网站提供了bottomNavigationBar但是发现设置路由进入子页面之后它没法消失，百度了很多至今没有一个人写个原始的Flutter应用程序框架。这里只好自己写了，当然了思路都一样，用下面点击事件去记录index然后替换显示三个对应的页面就可以了。对于生命传值路由我希望大家可以去看官方网站比较需要理解，而且很好理解的，动态和静态如果设置路由，如何传值这些都是分分钟的事情。Flutter官网连接.
三，写代码：
1.框架的搭建：
框架如下图：三个可点击部件，然后点击可以改变颜色，且切换不同内容。在Flutter里面什么都是小部件组成，android中点击切换碎片，我们Flutter点击切换小部件。我们最初的时候是不是都是些三个按钮和文字的RadioGrup或者Line...来切换三个碎片。这里我们一样三个小部件来切换三个自定义部件就可以了。
框架如下：
class MyHomePager extends StatefulWidget {
@override
State createState() {
return new _MyHomePageState();
}
}
class _MyHomePageState extends State
with SingleTickerProviderStateMixin {
bool preed_is = true;
bool preed_is_second = false;
bool preed_is_threed = false;
int index = 0;
_pressedChangerd() {
/*Navigator.of(context).push(
new MaterialPageRoute(
builder: (context) {
return new WidgetPager();
},
),
);*/
setState(() {
if (index != 0) {
index = 0;
preed_is = !preed_is;
}
if (preed_is_second) {
preed_is_second = !preed_is_second;
}
if (preed_is_threed) {
preed_is_threed = !preed_is_threed;
}
});
}
_pressedChangerd_Second() {
setState(() {
if (index != 1) {
index = 1;
preed_is_second = !preed_is_second;
}
if (preed_is) {
preed_is = !preed_is;
}
if (preed_is_threed) {
preed_is_threed = !preed_is_threed;
}
});
}
_pressedChangerd_Threed() {
setState(() {
if (index != 2) {
index = 2;
preed_is_threed = !preed_is_threed;
}
if (preed_is_second) {
preed_is_second = !preed_is_second;
}
if (preed_is) {
preed_is = !preed_is;
}
});
}
@override
void dispose() {
//页面失去焦点时候
super.dispose();
}
File _image;
Future getImage() async {
var image = await ImagePicker.pickImage(source: ImageSource.camera);
setState(() {
_image = image;
});
}
Future _prefs = SharedPreferences.getInstance();
Future _counter;
String namess;
Future _incrementCounter() async {
final SharedPreferences prefs = await _prefs;
final String counter =
prefs.getString('counter').length > 0 ? 'Love You' : 'Love Flutter';
setState(() {
_counter = prefs.setString("counter", counter).then((bool success) {
return counter;
});
});
}
@override
void initState() {
super.initState();
_counter = _prefs.then((SharedPreferences prefs) {
namess = prefs.getString('counter');
return (prefs.getString('counter') ?? 0);
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Center(
child: new Text(index == 0
? '三天搞定--Flutter'
: index == 1 ? 'Flutter-交互' : 'Flutter--系统调用'),
),
),
body: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
new Expanded(
child: new Container(
//这里我们需要用index判断切换的界面内容显示哦！三元就行，真的说实话，百度这么强大没有一个人写出这种场见的android应用切换碎片场景。用TabBarView和bottomNavigationBar根本就没法去掉下面的导航栏。可能是我目前水平不够吧。这里我根据android fragment占用位置用Fragment去替换内容从而实现切换，思路一模一样。
//所显示更具index判断点击的是那个按钮，然后做响应的内容小部件显示就可以了。下面用一个很长很长的三元计算写了出来，如果点击是第一个那么，替换为第一个内容小部件，如果是index=2第二个
//依次往右边走就可以。
child: index == 0
? new ListView(
children: [
new ImageAnimal(),
WidgetPagers(),
new WidgetStudy(),
new WidgetText(),
/* 这是优化之前的代码很烦，index == 0
? new ImageAnimal()
: index == 1 ? WidgetStudy() : new MyFadeTest(),*/
],
)
: index == 1
? new Container(
child: FragmentPagerSecond(),
color: Colors.black12,
)
: new ListView(
children: [
new Container(
color: Colors.teal,
child: new Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: [
new Container(
color: Colors.teal,
child: new ClipOval(
//这个一般可以作为圆形的裁剪哦。
child: new SizedBox(
width: 100.0,
height: 100.0,
child: _image == null
? new Text('点击右边的按钮添加图片')
: new Image.file(
_image,
fit: BoxFit.fill,
),
),
),
/*
*
*/ /*
child: _image == null
? new Text('点击右边的按钮添加图片')
: new Image.file(
_image,
width: 300.0,
height: 200.0,
fit: BoxFit.fill,
),*/
),
new FloatingActionButton(
onPressed: getImage,
tooltip: 'Pick Image',
child: new Icon(Icons.add_a_photo),
),
],
),
width: 600.0,
height: 200.0,
),
new MyFadeTest(),
new GestureDetector(
child: new RaisedButton(
onPressed: _incrementCounter,
child: new Text(
'点击我储存数据"Love You"到本地',
style: new TextStyle(color: Colors.white),
),
color: Colors.teal,
),
),
new Text(namess == null ? "没有储存成功" : namess),
],
),
width: 600.0,
height: 900.0,
decoration: new BoxDecoration(color: Colors.white),
),
),
new Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
new GestureDetector(
onTap: _pressedChangerd,
child: new Container(
child: new Column(
children: [
new Icon(
Icons.home,
color:
preed_is ? Colors.orangeAccent : Colors.white,
),
new Text(
'布局',
style: new TextStyle(
color: preed_is
? Colors.orangeAccent
: Colors.white),
),
],
),
),
),
new GestureDetector(
onTap: _pressedChangerd_Second,
child: new Container(
child: new Column(
children: [
new Icon(
Icons.computer,
color: preed_is_second
? Colors.orangeAccent
: Colors.white,
),
new Text(
'交互',
style: new TextStyle(
color: preed_is_second
? Colors.orangeAccent
: Colors.white),
),
],
),
),
),
new GestureDetector(
onTap: _pressedChangerd_Threed,
child: new Container(
child: new Column(
children: [
new Icon(
Icons.person,
color: preed_is_threed
? Colors.orangeAccent
: Colors.white,
),
new Text(
'系统',
style: new TextStyle(
color: preed_is_threed
? Colors.orangeAccent
: Colors.white),
),
],
),
),
),
],
),
width: 600.0,
height: 60.0,
color: Color(0xFF00796B),
padding: new EdgeInsets.only(top: 5.0),
),
],
));
}
}
复制代码
当然了这个应用可以提供很多小部件的学习以及动画的交互和系统调用方面的。如下图：
项目会一直完善的，https://github.com/luhenchang/flutter_study
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
