Flutter第三讲，MaterialApp 和 Scaffold

我们第一讲就说了，相当于UIKit的material.dart，是Flutter提供给我们一套便于我们快速写UI的包，那其实在真正写项目的时候Flutter提供了一个非常有用东西，什么东西呢？接下来我们就来看看MaterialApp， 为了方便讲解我们来新建一个App类,然后我们修改下main函数

main

<code>void main() => runApp(App())
/<code>

App 类

<code>class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyWidget()
    );
  }
}
/<code>

这次我们返回MaterialApp，相当于iOS的keyWindow，它有个属性是home，相当于window的rootViewController，我们设置成MyWidget，我们来看看有什么变化

image

我们看到Hello Flutter底下多了两个黄色的横杠，右上角多了个DEBUG的标识，我们先不管这些，接下来我们来再完善下这个界面，我们再来看一个叫Scaffold的Widget，这个Widget就像iOS的NavigationController一样，它有一个属性叫appBar相当于我们的navigationBar一样，有个title属性，注意这个title属性也是个Widget类型的，所以可以是文字也可以是其他，我们先给它设置个文字来看看

<code>class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
            title: Text('FlutterDemo')),
      )
    );
  }
}
/<code>

我们保存下看下效果

image

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

image

我们现在可以看到，虽然我们现在的项目有点小，以后我们做项目差不多也就是这个结构了，最后我们再来介绍下MaterialApp的另一个非常有用的属性theme就是主题，它可以控制导航条的颜色,我们来修改下theme

<code>
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),
    );
  }
}
/<code>

看看效果

image

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

閱讀更多 新新猿類 的文章

關鍵字: 共通 程序 iOS