目录结构
文件夹 | 作用 |
android | android 平台相关代码 |
ios | ios 平台相关代码 |
lib | flutter 相关代码,我们主要编写的代码就在这个文件夹 |
test | 用于存放测试代码 |
pubspec.yaml | 配置文件,一般存放一些第三方库的依赖。 |
Flutter入口文件和方法
Flutter项目下lib目录中的 main.dart 即为入口文件
void main(){
runApp(MyApp());
}
void main() => runApp(MyApp()); //或者这样写
Flutter把内容都单独抽离成一个组件
在flutter中自定义组件其实就是一个类, 想要定义组件必须要继承StatefulWidget或StatelessWidget
StatelessWidget 是无状态组件,状态不可变的 widget —— 它没有要管理的内部状态
StatefulWidget 是有状态组件,持有的状态可能在 widget 生命周期改变。使用setState方法管理StatefulWidget的状态的改变
MaterialApp组件
用于创建主题,它封装了应用程序实现 Material Design 所需要的一些 Widget。一般作为顶层 widget 使用。
Flutter应用中,一个完整的项目是从MaterialApp这个组件开始的,即MaterialApp作为入口存在的
常用属性:
字段 | 类型 | 描述 |
---|---|---|
home | Widget | 主页(app运行时打开的首页面) |
title | String | 标题(应用的名字) |
color | Color | 颜色(程序切换中应用图标背景的颜色,当应用图标背景为透明时) |
theme | ThemeData | 主题 |
routes | Map<String, WidgetBuilder> | 路由 |
Scaffold组件
Scaffold 是 Material Design 布局结构的基本实现。此类提供了用于显示 drawer、snackbar 和底部 sheet 的 API。
Scaffold实现了基本的Material Design布局。只要是在Material Design中定义过的单个界面实现的布局元素,都可以使用Scaffold来绘制
常用属性:
属性名 | 类型 | 说明 |
---|---|---|
appBar | AppBar | 显示在界面顶部的一个AppBar |
body | Widget | 当前界面所显示的主要内容 |
drawer | Widget | 侧边栏组件 |
Demo
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
//自定义组件
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
),
body: HomeContent(),
),
theme: ThemeData(
primarySwatch: Colors.pink,
),
);
}
}
//
class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text(
'hello flutter',
textDirection: TextDirection.ltr,
style: TextStyle(
fontSize: 40.0,
color: Colors.pink,
),
),
);
}
}
Comments | NOTHING