学习自:Dart Flutter教程_Dart Flutter入门实战视频教程-2019年新出.
我们来看一下Flutter
中结构吧!
android
文件夹: 表示生成的Android
的项目目录build
文件夹:表示运行项目时生成的文件ios
:表示ios
的项目目录lib
:存放Flutter相关代码,主要编写的代码就放在这个文件夹中。pubspec.yaml
:表示项目的配置文件。
这里主要讲一下,pubspec.yaml
文件中的参数,以及如何添加外部依赖。
pubspec.yaml
每一个Flutter
项目中lib
目录里面有一个main.dart
文件,这个文件就是Flutter的入口文件。
main.dart里面的
void main() {
runApp(new TestApp());
}
在dart中我们在创建对象时,可以省略new
如下所示:
void main() {
runApp(TestApp());
}
可简写为
void main() => runApp(TestApp());
其中main
方法就是dart
的入口方法,runApp
就是flutter的入口方法。
TestApp()
是一个自定义的组件.
直接上手代码解释吧!
void main()=>{
runApp(
Center(
child: Text(
'Flutter学习第一天',
textDirection: TextDirection.ltr,
),
)
);
};
在Flutter
中自定义组件其实就是一个类,这个类需要继承StatelessWidget
/StatefulWidget
,目前我们先使用的是StatelessWidget
。
StatelessWidget
是无状态组件,状态不可改变得widget
StatefulWidget
是有状态的组件,持有的状态可能在widget
生命周期改变
void main()=>{
runApp(TestApp())
};
//自定义Widget
class TestApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Text(
'我是一个文本内容',
textDirection: TextDirection.ltr,
),
);
}
}
MaterialApp
组件
MaterialApp
:封装了大部分的Material Design
风格的Widget
。一般作为根组件使用。常用属性为:
home
(主页)、title
(标题)、color
(颜色)、theme
(主题)、routs
(路由)。
Scaffold
组件
Scaffold
:通常我们是在MaterialApp
中的home
对应着Scaffold
组件,它是Material Design
布局结构的基本实现,此类提供了用于显示的drawer
、snackbar
和底部sheet
的API
常用属性为:
appBar
:显示在界面顶部的一个AppBar
body
:当前界面所需要显示的主要内容Widget
drawer
:抽屉菜单组件
综合上述所学,进行一个小练习
void main() => runApp(TestApp());
//自定义组件
class TestApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.yellow //表示主题颜色
),
home: Scaffold(
appBar: AppBar( //设置标题栏
title: Text('Flutter Demo'),
),
body:HomeContent(),
),
);
}
}
//自定义组件
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Center(
child: Text(
'Flutter探索之路',
style: TextStyle(
color: Colors.cyanAccent //设置字体颜色
),
),
);
}
}
其效果如图: