Flutter Widgets入門（一）：MaterialApp 和 Scaffold

時間 2019-11-06

標籤 flutter widgets 入門 materialapp scaffold 简体版

原文原文鏈接

1 MaterialApp

1.1 什麼是MaterialApp？

MaterialApp是咱們使用 Flutter開發中最經常使用的符合Material Design設計理念的入口Widget。你能夠將它類比成爲網頁中的<html></html>，且它自帶路由、主題色，<title>等功能。html

1.2 MaterialApp的幾個屬性

1.2.1 title

Strig類型，該屬性會在Android應用管理器的App上方顯示，對於iOS設備是沒有效果的。以下面代碼所示：app

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。less

須要注意的是, 若是你指定了home屬性，則在routes的路由表中不容許出現/的命名路由。ide

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便可。ui

下面的例子中，定義了兩個路由：/home和/detail，並使用GestureDetector定義了點擊事件已實現路由跳轉：this

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等。spa

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類型，一般用來造成一個漢堡包按鈕顯示其側邊欄。code

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個。htm

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('這是聯繫人頁面'),
          ),
      )));
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。