Flutter开发者

入门Flutter Wdiget

2018-03-05

在前面的文章中我们介绍了Dart的基本用法,和如何使用Flutter构建一个Hello Flutter 应用,今天我们就来认识下Flutter中Widget。

Flutter架构图

由上面的架构图可以看出来,flutter最上层是google 的纸墨设计Material Design(MaterialApp)组件,关于Material Design设计理念大家可以去官网安利一下啊material.io

在MaterialApp下面是所有组件的基类Widget,而在Widget的上层是statelessWdiget(无状态组件)、statefulWidget(有状态组件)和InheritedWidget(可以向子类View树种传递信息),包括我们在上篇文章中用到的Scaffold、Center、Text都是statelessWdiget、statefulWidget的子类。

当然在Flutter开发库中为我们预制了许多的控件,我们会在后面的教程中逐渐介绍部分常用的控件,当然大家也可以根据自己的需要自定义符合自己需求的控件。

MaterialApp

MaterialApp是我们app开发中常用的符合Material Design设计理念的入口Widget,从源码可以看出该widget的构造方法中有多个参数,但是基本上大多数参数是可以省略的。

MaterialApp({ // can’t be const because the asserts use methods on Map :-(

Key key,

this.navigatorKey,

this.title: ‘’,//标题

this.onGenerateTitle,

this.backgroundColor,//背景颜色

this.theme, //主题

this.home,//内容

this.routes: const {},//路由

this.initialRoute,

this.onGenerateRoute,

this.onUnknownRoute,

this.locale,

……

})

有前面Dart的基础知识可以很清楚看出,MaterialApp的构造方法中的每一个参数都是可以省略的,但是官方还是要求[home],[routes], [onGenerateRoute]这三个参数至少要有填写一个。

上节的例子:

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home:new MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

return new Scaffold(appBar:
    new AppBar(title: new Text("Hello Flutter")),
         body: new Center(
            child: new Text("Hello Flutter")
));
  }
}

在前面Hello Flutter的例子中我们传入了home参数自定义了一个继承于statelessWidget的组件MyApp,Myapp的build方法返回了一个Scaffold组件。

那么我们现在可以改变MaterialApp中传入的参数来满足自己相应的需求。

比如:我现在觉得app的默认主题颜色太丑了,我要改成红色,该怎么办呢?

其实很简单,只要
我们改变MaterialApp中的theme参数就行了。

   void main() {
  runApp(new MaterialApp(home:new MyApp(),theme:
   new ThemeData(primaryColor: Colors.red,accentColor: Colors.redAccent, ),
  ));
}

同理,大家可以根据自己的需要去修改其他属性。

Scaffold

Scaffold翻译过来就是架手架的意思,使用Scaffold可以很方便的构建一个Material应用

Scaffold的构造方法如下,Scaffold

const Scaffold({

Key key,

this.appBar,//标题栏

this.body,//内容

this.floatingActionButton,//悬浮按钮

this.persistentFooterButtons,//多状态按钮

this.drawer,//抽屉菜单

this.endDrawer,//右侧抽屉菜单

this.bottomNavigationBar,//底部导航栏

this.backgroundColor,//背景颜色

this.resizeToAvoidBottomPadding: true,

this.primary: true,

})

在上面的例子里我们仅仅用到了Scaffold的appBar和body参数,下面我们来看看其他参数的作用。

floatingActionButton

其实很简单,只要新增一个参数就Ok了

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
return new Scaffold(appBar:
new AppBar(title: new Text("Hello Flutter")),
    floatingActionButton: new FloatingActionButton(
      onPressed: null,
      child: new Text("点我")
    ),
    body: new Center(
        child: new Text("Hello Flutter")
    )
    );
  }
}

和Scaffold 类似floatingActionButton也有多个参数,但是基本也都是可以省略的,只有onPressed是必须的,在这里我们多传入了一个我们熟悉的Text , onPressed 是点击事件我们先传个null以后再解释怎么用。

drawer

同样的新增Drawer参数

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
return new Scaffold(appBar:
new AppBar(title: new Text("Hello Flutter")),
    floatingActionButton: new FloatingActionButton(
      onPressed: null,
      child: new Text("点我")
    ),
    drawer: new Drawer(),
    body: new Center(
        child: new Text("Hello Flutter")
        )
        );
     }
}

这里我们这里没有传入任何的参数,所以打开的菜单就是空白的,具体的用法以后的文章会具体说明呢

当然,其他参数的用法类似于floatingActionButton,我们也会在后面的文章中给大家一点一点的说明。大家也可以在下面自己尝试下其他参数的作用与效果

小结

  • Widget是Flutter中所有View的基类,widget在不同的平台借助于C++编译成原生代码
  • statelessWdiget是无状态组件,statefulWdiget是有状态组件,InheritedWidget可以向子View树中传递状态和信息
  • 在Flutter中我们所使用到的View基本上都继承于statelessWdiget、statefulWdiget或者InheritedWidget
  • MaterialApp是Flutter中满足Google Material Design设计的View组件,通常作为app的入口View
  • Scaffold是帮助我们快速开发app的“脚手架”,借助于Scaffold我们可以快速构架我们应用的大体样子。

试一试

看了这篇文章相比大家对Flutter的Widget会有了基本的认识,那么就来试一试下面的例子。

  1. 改变floatingActionButton的颜色为蓝色,字体颜色是白色
  2. 把侧滑菜单放到右边,菜单内容是一个居中的文字“我是菜单”

效果如下

大家可以根据这篇文章讲到的知识点试一试上面的效果,做不出来也不要紧,我们下篇文章会具体讲下的

使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏

打赏请备注姓名或者昵称,方便我后期统计哦

关注公众号,及时查阅最新文章