我们第一讲就说了,相当于UIKit
的material.dart
,是Flutter
提供给我们一套便于我们快速写UI
的包,
那其实在真正写项目的时候Flutter
提供了一个非常有用东西,什么东西呢?接下来我们就来看看MaterialApp
, 为了方便讲解我们来新建一个App
类,然后我们修改下main
函数
main
void main() => runApp(App())
App 类
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyWidget()
);
}
}
这次我们返回MaterialApp
,相当于iOS
的keyWindow
,它有个属性是home
,相当于window
的rootViewController
,我们设置成MyWidget
,我们来看看有什么变化
我们看到Hello Flutter
底下多了两个黄色的横杠,右上角多了个DEBUG
的标识,我们先不管这些,接下来我们来再完善下这个界面,我们再来看一个叫Scaffold
的Widget
,这个Widget
就像iOS
的NavigationController
一样,它有一个属性叫appBar
相当于我们的navigationBar
一样,有个title
属性,注意这个title
属性也是个Widget
类型的,所以可以是文字也可以是其他,我们先给它设置个文字来看看
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('FlutterDemo')),
)
);
}
}
我们保存下看下效果
是不是跟我们刚建工程时系统给的demo很像了,它还有个body
属性就是除了导航条下面的部分,我们设置成MyWidget
,来看看最终的效果
我们现在可以看到,虽然我们现在的项目有点小,以后我们做项目差不多也就是这个结构了,最后我们再来介绍下MaterialApp
的另一个非常有用的属性theme
就是主题,它可以控制导航条
的颜色,我们来修改下theme
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('FlutterDemo')),
body: MyWidget(),
),
theme: ThemeData(primaryColor: Colors.yellow),
);
}
}
看看效果
怎么样?是不是觉得也没多难吧,其实小程序也是一样的,等你做小程序的时候就会发现很多东西都是共通的,明天我们接着来看ListView
和常用的Widget
,然后我们就直接进入我们的项目实战了
喜欢的朋友可以扫描关注我的公众号(多多点赞,多多打赏,您的支持是我写作的最大动力)
iOS_DevTips