Flutter - Scaffold class

Flutter 的 Scaffold widget 可用來實現基本的 material design layout。

其建構子如下：

Scaffold({Key key, PreferredSizeWidget appBar, Widget body, Widget floatingActionButton, FloatingActionButtonLocation floatingActionButtonLocation, FloatingActionButtonAnimator floatingActionButtonAnimator, List<Widget> persistentFooterButtons, Widget drawer, Widget endDrawer, Widget bottomNavigationBar, Color backgroundColor, bool resizeToAvoidBottomPadding: true, bool primary: true })

屬性如下：

NameTypeDescription
appBarPreferredSizeWidgetAn app bar to display at the top of the scaffold.
backgroundColorColorThe color of the Material widget that underlies the entire Scaffold.
bodyWidgetThe primary content of the scaffold.
bottomNavigationBarWidgetA bottom navigation bar to display at the bottom of the scaffold.
drawerWidgetA panel displayed to the side of the body, often hidden on mobile devices. Swipes in from either left-to-right (TextDirection.ltr) or right-to-left (TextDirection.rtl)
endDrawerWidgetA panel displayed to the side of the body, often hidden on mobile devices. Swipes in from right-to-left (TextDirection.ltr) or left-to-right (TextDirection.rtl)
floatingActionButtonWidgetA button displayed floating above body, in the bottom right corner.
floatingActionButtonAnimatorFloatingActionButtonAnimatorAnimator to move the floatingActionButton to a new floatingActionButtonLocation.
floatingActionButtonLocationFloatingActionButtonLocationResponsible for determining where the floatingActionButton should go.
persistentFooterButtonsListA set of buttons that are displayed at the bottom of the scaffold.
primaryboolWhether this scaffold is being displayed at the top of the screen.
resizeToAvoidBottomPaddingboolWhether the body (and other floating widgets) should size themselves to avoid the window’s bottom padding.
hashCodeintThe hash code for this object.
keyKeyControls how one widget replaces another widget in the tree.
runtimeTypeTypeA representation of the runtime type of the object.

方法如下：

NameReturn TypeDescription
createState()ScaffoldStateCreates the mutable state for this widget at a given location in the tree.
createElement()StatefulElementCreates a StatefulElement to manage this widget’s location in the tree.
debugDescribeChildren()ListReturns a list of DiagnosticsNode objects describing this node’s children.
debugFillProperties(DiagnosticPropertiesBuilder properties)voidAdd additional properties associated with the node.
noSuchMethod(Invocation invocation)dynamicInvoked when a non-existent method or property is accessed.
toDiagnosticsNode({String name, DiagnosticsTreeStyle style })DiagnosticsNodeReturns a debug representation of the object that is used by debugging tools and by toStringDeep.
toString({DiagnosticLevel minLevel: DiagnosticLevel.debug })StringReturns a string representation of this object.
toStringDeep({String prefixLineOne: ‘’, String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug })StringReturns a string representation of this node and its descendants.
toStringShallow({String joiner: ‘, ‘, DiagnosticLevel minLevel: DiagnosticLevel.debug })StringReturns a one-line detailed description of the object.
toStringShort()StringA short, textual description of this widget.

使用上可設定 body 屬性，指定主要區域要呈現的內容。

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
      home: new Scaffold(
    body: new Center(
      child: new Text('Hello World'),
    ),
  )));
}

1.png

2.png

設定 appBar 屬性，指定上方的 Bar。

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
      home: new Scaffold(
    appBar: new AppBar(
      title: new Text('Welcome to Flutter'),
    ),
  )));
}

3.png

4.png

設定 floatingActionButton 屬性，指定 FloatingActionButton 元件。

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
      home: new Scaffold(
    floatingActionButton: new FloatingActionButton(
      onPressed: () {},
      tooltip: 'Increment',
      child: new Icon(Icons.add),
    ),
  )));
}

5.png

6.png

設定 bottomNavigationBar 屬性，指定下方的導覽按鈕。

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
      home: new Scaffold(
          bottomNavigationBar: new BottomNavigationBar(
    items: <BottomNavigationBarItem>[
      new BottomNavigationBarItem(
        icon: new Icon(Icons.home),
        title: new Text("Left"),
      ),
      new BottomNavigationBarItem(
        icon: new Icon(Icons.search),
        title: new Text("Right"),
      ),
    ],
  ))));
}

7.png

8.png

設定 drawer 屬性，指定側邊選單。

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
      home: new Scaffold(
          appBar: new AppBar(
            title: new Text('Welcome to Flutter'),
          ),
          drawer: new Drawer(
            child: new ListView(
              padding: EdgeInsets.zero,
              children: <Widget>[
                new DrawerHeader(
                  child: new Text('Drawer Header'),
                  decoration: new BoxDecoration(
                    color: Colors.blue,
                  ),
                ),
                new ListTile(
                  title: new Text('Item 1'),
                  onTap: () {},
                ),
                new ListTile(
                  title: new Text('Item 2'),
                  onTap: () {},
                ),
              ],
            ),
          ))));
}

9.png

10.png

11.png