入门Flutter Widget

Posted 2021-04-29 flutter开发者

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了入门Flutter Widget相关的知识，希望对你有一定的参考价值。

在前面的文章中我们介绍了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 <String, WidgetBuilder>{},//路由
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, ),
  ));
}

运行效果如下：

入门Flutter Widget

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

Scaffold

Scaffold翻译过来就是架手架的意思，使用Scaffold可以很方便的构建一个Material应用
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，以后再解释怎么用。

运行效果如下：

入门Flutter Widget

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")
        )
    );
  }
}