1. 运行程序
建议使用 Android Studio 进行 flutter 编程 , Android Studio 对 dart 语法很友好。
2. 示范代码
话不多说，先上代码，代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。
3. 主页创建
优雅的编程，我们让 main.dart 更清晰，代码逻辑后置。先创建一个 home.dart 文件。
import 'package:flutter/material.dart';
// 这里我们预留动态更新页面功能，使用 StatefulWidget
class FMHomeVC extends StatefulWidget {
@override
FMHomeState createState() => FMHomeState();
}
class FMHomeState extends State {
return Container(
child: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: Colors.lightBlue,
title: Text("Home"),
),
body: Center(
child: Text("Home"),
),
),
);
}
然后对 main.dart 进行更改，使用 home.dart 文件作为主页，注意修改 import 路径。
import 'package:flutter/material.dart';
// 此处注意修改为自己的 home.dart 路径
import 'package:FMStudyApp/home/home.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: FMHomeVC(),
);
}
}
运行程序后，如下图，第一个主页已经生成好了。
3. ListView 创建
ListView 可以说是应用非常广泛的控件了，并且简单实用，考虑到后续要在代码下载地址持续更新，我们就首先介绍使用 ListView。
先简单介绍一下代码逻辑。
/*
此处代码仅仅介绍这部分逻辑，不要复制使用，下边会贴详细代码。
*/
class FMHomeVC extends StatefulWidget {
@override
// 创建 State
FMHomeState createState() => FMHomeState();
}
class FMHomeState extends State {
// 创建数据源
var funcLists = [];
@override
// 重写父类方法，页面初始化会调用
void initState() {
super.initState();
// 封装数据初始化方法，为数据源添加数据，未来也可以在这里做网络请求
initData();
}
void initData() {
// 调用父类方法，会刷新页面
setState(() {
});
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
child: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: Colors.lightBlue,
title: Text("Widgets 目录"),
),
body: Center(
child: ListView.builder(
padding: const EdgeInsets.all(15.0),
// 生成对应数据源数量的 Item
itemCount: funcLists.length,
itemBuilder: (context, index){
// 按照数据源对每个 Item 进行渲染
var func = funcLists[index];
return ListTile(
onTap: (){
// 点击事件，在这里处理不同 Item 跳转
},
);
},
),
),
),
);
}
下边上详细代码
import 'package:flutter/material.dart';
class FMHomeVC extends StatefulWidget {
@override
FMHomeState createState() => FMHomeState();
}
class FMHomeState extends State {
var funcLists = [];
@override
void initState() {
super.initState();
initData();
}
void initData() {
funcLists.add({"name": "基础组件", "desc": "在构建您的第一个Flutter应用程序之前，您绝对需要了解这些widget。"});
funcLists.add({"name": "Material Components", "desc": "实现了Material Design 指南的视觉、效果、motion-rich的widget。"});
funcLists.add({"name": "Cupertino(iOS风格的widget)", "desc": "用于当前iOS设计语言的美丽和高保真widget。"});
funcLists.add({"name": "Layout", "desc": "排列其它widget的columns、rows、grids和其它的layouts。"});
funcLists.add({"name": "Text", "desc": "文本显示和样式。"});
funcLists.add({"name": "Assets、图片、Icons", "desc": "管理assets, 显示图片和Icon。"});
funcLists.add({"name": "Input", "desc": "Material Components 和 Cupertino中获取用户输入的widget。"});
funcLists.add({"name": "动画和Motion", "desc": "在您的应用中使用动画。查看Flutter中的动画总览。"});
funcLists.add({"name": "交互模型", "desc": "响应触摸事件并将用户路由到不同的页面视图（View）。"});
funcLists.add({"name": "样式", "desc": "管理应用的主题，使应用能够响应式的适应屏幕尺寸或添加填充。"});
funcLists.add({"name": "绘制和效果", "desc": "Widget将视觉效果应用到其子组件，而不改变它们的布局、大小和位置。"});
funcLists.add({"name": "Async", "desc": "Flutter应用的异步模型。"});
funcLists.add({"name": "滚动", "desc": "滚动一个拥有多个子组件的父组件。"});
funcLists.add({"name": "辅助功能", "desc": "给你的App添加辅助功能(这是一个正在进行的工作)。"});
print(funcLists);
setState(() {
});
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
child: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: Colors.lightBlue,
title: Text("Widgets 目录"),
),
body: Center(
child: ListView.builder(
padding: const EdgeInsets.all(15.0),
itemCount: funcLists.length,
itemBuilder: (context, index){
var func = funcLists[index];
return ListTile(
contentPadding: const EdgeInsets.all(10.0),
title: Text(
"${func["name"]}",
style: TextStyle(
fontSize: 20,
color: Colors.black,
),
),
subtitle: Text(
"${func["desc"]}",
style: TextStyle(
fontSize: 15,
color: Colors.grey,
),
),
onTap: (){
Navigator.push(
context,
MaterialPageRoute(builder: (context) {
return FMHomeVC();
}),
);
},
);
},
),
),
),
);
}
运行效果如下图
点击跳转后如下图
4. 技术小结
dart 文件的创建、引用以及使用
其实新的文件创建很重要，从接触过的很多语言开发来看，项目入口还是尽可能要简洁。
在 main.dart 中，我们 import package:PATH/home.dart ，并且在 MyApp 中将 FMHomeVC() 设置为 home。StateflulWidget 的使用与创建
这里不多赘述，网上很多讲解，可以理解为页面为动态的，便于刷新页面。例如淘宝首页，没有网络进去可能会没有商品，但是网络请求完成后，按照网络数据需要刷新页面，就需要使用到 StatefulWidget了。
StatefulWidget 主要功能都集中在 State 的创建和逻辑处理，然后在 State 类中执行 setState((){})方法，可以 reload 页面，非常的简单方便。ListView 的创建与使用
ListView 其实是一个非常常用的组件，大部分表单页面和滚动视图都是使用 ListView 完成的。
主要注意 ListView.builder() 方法中的 itemCount、itemBuilder 两个key。itemCount 负责生成多少行 item ，itemBuilder 负责给对应行生成对应的 item。字典取值
本文中的 funcLists 为数组，数组中添加的每个元素都是字典。
然后 func = funcList[index] 取出每一个字典，然后 func["name"]、func["desc"] 取出对应 Key 的值，赋值给每个 item。"{var}" 为字符串中添加变量。