Flutter常用組件（Widget）解析-Scaffold

實現一個應用基本的布局結構。

舉個栗子：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new CenterDemoPage() ,
    );
  }
}

class CenterDemoPage extends StatefulWidget {
  @override
  createState() =>new CenterDemoPageState();
}

class CenterDemoPageState extends State<CenterDemoPage> {
  @override
  Widget build(BuildContext context){
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Scaffold Widget Demo'),
      ),
      body: Center(
        child: Text('scaffold'),
      ),
      bottomNavigationBar: BottomAppBar(
        child: Container(height: 50.0,),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }
}

 

 這個例子中的Scaffold包含了一個AppBar、BottomAppBar和一個FloatingActionButton，這個body的文本居中顯示，並且底部導航欄的Add按鈕通過FloatingActionButtonLocaton.centerDocked讓其居中顯示。

現在來看看Scaffold的幾個重要屬性：

1、appBar

appBar顯示在Scaffold的頂部。

appBar: new AppBar(
        title: new Text('Scaffold Widget Demo'),
        centerTitle: true,
        backgroundColor: Colors.red,
      ),

 

centerTitle：讓文本居中顯示。默認是居左顯示

backgroundColor：導航欄背景顏色

2、backgroundColor 這個是整個Scaffold的背景顏色

3、body 主要內容的視圖區域，在這個里面，展示的是你的核心內容

4、bottomNavigationBar 用於顯示底部導航欄

5、floatingActionButton 浮動於body右上角的按鈕

6、floatingActionButtonLocation 決定floatingActionButton按鈕的位置