Flutter第三講,MaterialApp 和 Scaffold

原创 木子召 新新猿类 今天

我们第一讲就说了,相当于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,我们来看看有什么变化

Flutter第三讲,MaterialApp 和 Scaffold


我们看到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')),

)

);

}

}

我们保存下看下效果

Flutter第三讲,MaterialApp 和 Scaffold


是不是跟我们刚建工程时系统给的demo很像了,它还有个body属性就是除了导航条下面的部分,我们设置成MyWidget,来看看最终的效果

Flutter第三讲,MaterialApp 和 Scaffold


我们现在可以看到,虽然我们现在的项目有点小,以后我们做项目差不多也就是这个结构了,最后我们再来介绍下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),

);

}

}

看看效果

Flutter第三讲,MaterialApp 和 Scaffold


怎么样?是不是觉得也没多难吧,其实小程序也是一样的,等你做小程序的时候就会发现很多东西都是共通的,明天我们接着来看ListView和常用的Widget,然后我们就直接进入我们的项目实战了

One More Thing (查看福利)

识别二维码查看 2020—课程列表 全网IT各种资源有需求的可以微我,或者你喜欢的课程都可以给我发链接剩下的我来搞定

Flutter第三讲,MaterialApp 和 Scaffold


喜欢的朋友可以扫描关注我的公众号(多多点赞,多多打赏,您的支持是我写作的最大动力)关注有福利可以使用免费梯子自由上网

Flutter第三讲,MaterialApp 和 Scaffold


iOS_DevTips



分享到:


相關文章: