什么是网站功能,设置wordpress文章标题高亮的代码,中午网站做google广告好吗,广州wap网站建设在这个系列中#xff0c;我们将学习如何使用google的移动开发框架flutter创建一个电商应用。本文是flutter框架系列教程的第一部分#xff0c;将学习如何安装Flutter开发环境并创建第一个Flutter应用#xff0c;并学习Flutter应用开发中的核心概念#xff0c;例如widget、状…在这个系列中我们将学习如何使用google的移动开发框架flutter创建一个电商应用。本文是flutter框架系列教程的第一部分将学习如何安装Flutter开发环境并创建第一个Flutter应用并学习Flutter应用开发中的核心概念例如widget、状态等。 本系列教程包含如下四个部分敬请期待 如何从零构建flutter应用如何在flutter中布局元素如何在flutter中组织数据如何在flutter中展示数据 1. 开发环境安装与Flutter项目创建 Flutter的开发文档相当出色请参考官方文档先安装开发环境。 一旦开发环境安装好我们可以创建一个新的测试项目。我倾向于使用android studio因为它为flutter应用的开发提供了一个完备的集成开发环境。你需要在Android studio中安装一个Dard语言插件。 现在启动Android Studio你会看到初始化Flutter项目的选项 从配置列表中选择Flutter Application 。 可以为你的第一个Flutter应用起一个酷炫的名字不过如果你和我一样不善于起名就用timer好了。 对话框的最后一步会要求我们填写应用的包名 接下来Flutter SDK就会为应用创建一个初始的目录结构main.dart是应用执行的入口。 2. 编写并测试应用代码 在Flutter中一切都是控件widget。Flutter应用中的图像、图标和文本都是widget。布局元素例如行、列、栅格等用来安排其他widget的位置、大小和对齐而这些布局元素本身也是widget。 参考如下代码修改你的main.dart文件 import package:flutter/material.dart;void main() runApp(MyApp());class MyApp extends StatelessWidget {overrideWidget build(BuildContext context) {return MaterialApp(title: Welcome to Flutter,home: Scaffold(appBar: AppBar(title: Text(Welcome to Flutter),),body: Center(child: Text(Hello World),),),);}
} 现在启动Android模拟器 注意widget的焦点我们接下来将修改MaterialApp的内容。先看一下原始版本 body: Center(child: Text(Hello World),
) Flutter中的布局元素也是widget可以根据其是否支持包含多个widget而简单地归类为两种类型。例如Container、Padding只能包含一个子widget而Row、Column则可以包含多个。 现在我们在Row布局中引入三个文本widget body: Center(child: Row(mainAxisAlignment: MainAxisAlignment.center,children: Widget[Text(0),Text(0),Text(0),],),
), 现在看起来是这样 在我们开始设置组件的样式之前建议先创建一个新的widget来处理样式问题以便遵循DRYDont Repeat Yoursel原则。 将三个子widget用一个自定义widget后面解释替换。现在main.dart文件变成 import package:flutter/material.dart;void main() runApp(MyApp());class MyApp extends StatelessWidget {overrideWidget build(BuildContext context) {return MaterialApp(title: Welcome to Flutter,home: Scaffold(appBar: AppBar(title: Text(Timer),),body: Center(child: Row(mainAxisAlignment: MainAxisAlignment.center,children: Widget[CustomTextContainer(),CustomTextContainer(),CustomTextContainer(),],),),),);}
}class CustomTextContainer extends StatelessWidget {overrideWidget build(BuildContext context) {return Text(00);}
} 我不是很擅长用户界面但是我们还是尽力吧加点背景色留点空白 class CustomTextContainer extends StatelessWidget {CustomTextContainer({this.label, this.value});final String label;final String value;overrideWidget build(BuildContext context) {return Container(margin: EdgeInsets.symmetric(horizontal: 5),padding: EdgeInsets.all(20),decoration: new BoxDecoration(borderRadius: new BorderRadius.circular(10),color: Colors.black87,),child: Column(mainAxisSize: MainAxisSize.min,children: Widget[Text($value,style: TextStyle(color: Colors.white,fontSize: 54,fontWeight: FontWeight.bold,),),Text($label,style: TextStyle(color: Colors.white70,),)],),);}
} 同时在文本下面插入一个按钮widget修改后的代码运行结果如下 现在到了app最不可或缺的部分了状态。状态将持有timer的当前值和运行标识。我补充了一个TimerState类它负责维护状态同时构建widget树。 class Timer extends StatefulWidget {overrideStateStatefulWidget createState() {return new TimerState();}
}class TimerState extends StateTimer {int secondsPassed 0;bool isActive false;overrideWidget build(BuildContext context) {// Return Widget Tree}
} 按钮用来切换timer的运行或者停止 RaisedButton(child: Text(isActive ? STOP : START),onPressed: () {setState(() {isActive !isActive;});},
) Dart有个用于异步操作的优雅的模块。我们可以使用其Timer类来实现读秒。修改后的TimerAppState代码如下注意我们已经重构Timer类并改名为TimerApp以避免与异步模块中的Timer类混淆 class TimerAppState extends StateTimerApp {static const duration const Duration(seconds:1);int secondsPassed 0;bool isActive false;Timer timer;void handleTick() {if (isActive) {setState(() {secondsPassed secondsPassed 1;});}}overrideWidget build(BuildContext context) {if (timer null)timer Timer.periodic(duration, (Timer t) {handleTick();});int seconds secondsPassed % 60;int minutes secondsPassed ~/ 60;int hours secondsPassed ~/ (60*60);return MaterialApp(...)}
} 好了我们已经完成了第一个Flutter应用完整的Dard代码可以在这里下载。 原文链接【Flutter教程】从零构建电商应用一 汇智网翻译整理转载请标明出处。转载于:https://blog.51cto.com/13697184/2329763
