flutter widgets入门(一):materialapp 和 scaffold - 编程思维

1 MaterialApp

1.1 什么是MaterialApp?

MaterialApp是我们使用 Flutter开发中最常用的符合Material Design设计理念的入口Widget。你可以将它类比成为网页中的<html></html>,且它自带路由、主题色,<title>等功能。

1.2 MaterialApp的几个属性

1.2.1 title

Strig类型,该属性会在Android应用管理器的App上方显示,对于iOS设备是没有效果的。如下面代码所示:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      title: '一个Flutter应用',
      home: Text('hello flutter',
          style: TextStyle(
              color: Colors.white, decoration: TextDecoration.none))));
}

1.2.2 home

Widget类型,这是在应用程序正常启动时首先显示的Widget,除非指定了initialRoute。如果initialRoute显示失败,也该显示该Widget。

需要注意的是, 如果你指定了home属性,则在routes的路由表中不允许出现/的命名路由。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      title: '一个Flutter应用',
      home: Center(
        child: Text('hello flutter',
            style: TextStyle(
                color: Colors.white, decoration: TextDecoration.none)),
      )));
}

1.2.3 routes

Map<String, WidgetBuilder>类型,是应用的顶级路由表。当我们再使用Navigator.pushNamed进行命名路由的跳转时,会在此路表中进行查找并跳转。如果你的应用程序只有一个页面,则无需使用routes,直接指定home对应的Widget即可。

下面的例子中,定义了两个路由:/home/detail,并使用GestureDetector定义了点击事件已实现路由跳转:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(title: '一个Flutter应用', home: HomePage(), routes: {
    '/home': (BuildContext context) => HomePage(),
    '/detail': (BuildContext context) => DetailPage()
  }));
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: GestureDetector(
            onTap: () {
              Navigator.pushNamed(context, '/detail');
            },
            child: Text('首页,点击跳转详情页',
                style: TextStyle(
                    fontSize: 20.0,
                    color: Colors.white, decoration: TextDecoration.none))));
  }
}

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: GestureDetector(
            onTap: () {
              Navigator.pushNamed(context, '/home');
            },
            child: Text('详情页,点击跳转首页',
                style: TextStyle(
                    fontSize: 20.0,
                    color: Colors.white, decoration: TextDecoration.none))));
  }
}

2 Scaffold

2.1 什么是Scaffold?

Scaffold通常被用作MaterialApp的子Widget,它会填充可用空间,占据整个窗口或设备屏幕。Scaffold提供了大多数应用程序都应该具备的功能,例如顶部的appBar,底部的bottomNavigationBar,隐藏的侧边栏drawer等。

2.2 Scaffold的几个属性

2.2.1 appBar

PreferredSizeWidget类型,显示在Scaffold的顶部区域。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      title: '一个Flutter应用', 
      home: Scaffold(
        appBar: AppBar(
          title: Text('首页'))
        )
      )
  );
}

2.2.2 drawer

Widget drawer类型,通常用来形成一个汉堡包按钮显示其侧边栏。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      title: '一个Flutter应用',
      home: Scaffold(
          appBar: AppBar(title: Text('首页')),
          drawer: Drawer(
              child: Column(
            children: <Widget>[
              DrawerItem(1, '列表1'),
              DrawerItem(2, '列表2'),
              DrawerItem(3, '列表3'),
              DrawerItem(4, '列表4'),
              DrawerItem(5, '列表5')
            ],
          )))));
}

class DrawerItem extends StatelessWidget {
  final int id;
  final String name;

  DrawerItem(this.id, this.name);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        border:
            Border(bottom: BorderSide(width: 0.5, color: Color(0xFFd9d9d9))),
      ),
      height: 52.0,
      child: FlatButton(
          onPressed: () {},
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[Text(id.toString()), Text(' - '), Text(name)],
          )),
    );
  }
}

2.2.3 bottomNavigationBar

Widget bottomNavigationBar类型,用户显示底部的tab栏,items必须大于2个。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      title: '一个Flutter应用',
      home: Scaffold(
          appBar: AppBar(
            title: Text('首页'),
          ),
          bottomNavigationBar: BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            currentIndex: 1,
            items: [
              new BottomNavigationBarItem(
                  icon: Icon(Icons.account_balance), title: Text('银行')),
              new BottomNavigationBarItem(
                  icon: Icon(Icons.contacts), title: Text('联系人')),
              new BottomNavigationBarItem(
                  icon: Icon(Icons.library_music), title: Text('音乐'))
            ],
          ))));
}

2.2.4 body

Widget类型,Scaffold的主题内容。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      title: '一个Flutter应用',
      home: Scaffold(
          appBar: AppBar(
            title: Text('首页'),
          ),
          bottomNavigationBar: BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            currentIndex: 1,
            items: [
              new BottomNavigationBarItem(
                  icon: Icon(Icons.account_balance), title: Text('银行')),
              new BottomNavigationBarItem(
                  icon: Icon(Icons.contacts), title: Text('联系人')),
              new BottomNavigationBarItem(
                  icon: Icon(Icons.library_music), title: Text('音乐'))
            ],
          ),
          body: Center(
            child: Text('这是联系人页面'),
          ),
      )));
}

版权声明:本文版权归作者所有,遵循 CC 4.0 BY-SA 许可协议, 转载请注明原文链接
https://segmentfault.com/a/1190000018445793

react native学习资源汇总 - 编程思维

目前主流的移动跨平台技术方案大体可以分为三类,一类是使用原生内置浏览器加载HTML5的Hybrid技术方案,采用此种方案的主要有Cordova、Ionic和微信小程序;另一类是使用JavaScript语言进行开发,然后使用原生组件进行渲染,采用此方案的主要有React Native、Weex和快应用;最后一类是使用自带

flutter与react native - 编程思维

一、Flutter 1.什么是Flutter 2018年6月21日谷歌官方宣布Flutter的首个发布预览版(Release Preview 1)正式发布,这标志着谷歌进入了Flutter正式版(1.0)发布前的最后阶段。 Flutter是一个由谷歌开发的开源移动应用软件开发工具包,用于为Android和iOS开发应用

使用flutter,我写了一个开源版本的handshaker - 编程思维

前言去年八月份,由于开发需要,我尝试在Mac电脑上寻找一款类似Windows上手机助手的应用,几经辗转之下找到了HandShaker,非常好用,可却经常奔溃,尝试了各种方式,奔溃依然不断发生。这款产品来自锤子科技,在18年已经停止了维护,出现这种情况也不足为奇。但这么好的项目就这样丢失了,实在有点可惜。于是,我决定仿制

mobtech 短信验证 flutter插件 - 编程思维

这是一个基于SMSSDK功能的扩展的Flutter插件。使用此插件能够帮助您在使用Flutter开发应用时,快速地实现获取验证码功能。Demo例子:https://github.com/MobClub/SM...开始集成在pubspec.yaml文件中加入下面依赖dependencies: mobsms: mobcom

爬了10000张nasa关于火星探索的图片,我发现了一个秘密 - 编程思维

前言最近,我使用爬虫技术,爬取了美国航空航天局,也就是你电影里经常见到的 NASA, 火星探索的相关图片,有 10000 张吧。嗯嗯,小事情,小事情。完事儿之后,有点小激动,于是就有了这篇文章,将有以下内容:我为什么要爬取NASA的图片我是如何爬取NASA图片的(超详细)我得到了什么(高清大图)我发现了什么秘密(超劲爆

dart系列之:在dart中使用packages - 编程思维

简介java中使用jar包来封装有用的功能,然后将其分发到maven仓库中,供其他人使用。同样的在dart中也有类似的概念叫做packages。packages就是可以用来共享的软件包,可以包含libraries和tools。你可以在pub.dev网站中查到dart中所有的共享packages的信息。 那么怎么在一个d

dart开发服务端,我是不是发烧(骚)了? - 编程思维

前言最近一段时间,我和我的团队开发了两个 APP。客户端方面采用了 Flutter,方便跨平台。服务端方面剑走偏锋,没有采用 php, pythod, java之类的,而是采用了与 Flutter 一样的 Dart 语言。回顾整个过程,觉得自己烧(骚)的不轻,写下这篇文章,全当是记录病情了。若是还有其他青年才俊,也有

flutter android 工程结构及应用层编译源码深入分析 - 编程思维

背景本文部分配图及源码最近基于 Flutter 2.2.3 版本进行了修正更新发布。目的是为了弄清 Flutter 在安卓端应用层的整个编译来龙去脉,以便编译过程中出任何问题都能做到心里有数,另一个目的是为了能够在应用层定制 Flutter 编译。全文比较长,图文并茂,由工程结构深入到源码解析。Flutter 模块的几