Flutter Scaffold搭建APP的完美選擇

一、Scaffold是什麼

在Flutter開發中，Scaffold為我們提供了一套完備的Material Design樣式的APP頁面框架，其中包含了Appbar、Drawer、BottomNavigationBar以及FloatingActionButton等Widget。在搭建APP時，Scaffold可以作為我們的入口Widget，大大簡化了開發過程。

二、Scaffold的基本結構

在Flutter中使用Scaffold來構建APP最基本的代碼如下：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Scaffold Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Scaffold Demo'),
        ),
        body: Center(
          child: Text('Hello World!'),
        ),
      ),
    );
  }
}

可以看到，Scaffold包含三個部分：AppBar、Body和BottomNavigationBar。AppBar即是頂部欄，用於展示APP的logo、標題、菜單等功能；Body是頁面的主體部分，用於展示APP的內容；BottomNavigationBar則是底部導航欄，用於切換頁面或展示常用功能的入口。

三、Scaffold的常用屬性

除了基本的AppBar、Body和BottomNavigationBar之外，Scaffold還有許多常用屬性可以更加靈活地配置頁面，以下是幾個常用的：

1. Drawer

如果我們需要在APP中展示側邊欄，可以使用Scaffold的Drawer屬性。以下是示例代碼：

Scaffold(
  appBar: AppBar(
    title: Text('Flutter Scaffold Demo'),
  ),
  drawer: Drawer(
    child: ListView(
      children: [
        DrawerHeader(
          child: Text('Drawer Header'),
          decoration: BoxDecoration(
            color: Colors.blue,
          ),
        ),
        ListTile(
          title: Text('Item 1'),
          onTap: () {
            // do something
          },
        ),
        ListTile(
          title: Text('Item 2'),
          onTap: () {
            // do something
          },
        ),
      ],
    ),
  ),
  body: Center(
    child: Text('Hello World!'),
  ),
)

2. FloatingActionButton

如果我們需要在頁面中展示懸浮按鈕，可以使用Scaffold的FloatingActionButton屬性。以下是示例代碼：

Scaffold(
  appBar: AppBar(
    title: Text('Flutter Scaffold Demo'),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {
      // do something
    },
    tooltip: 'Increment',
    child: Icon(Icons.add),
  ),
  body: Center(
    child: Text('Hello World!'),
  ),
)

3. SnackBar

如果我們需要在頁面中展示一條提示信息，可以使用Scaffold的SnackBar屬性。以下是示例代碼：

Scaffold(
  appBar: AppBar(
    title: Text('Flutter Scaffold Demo'),
  ),
  body: Builder(
    builder: (BuildContext context) {
      return Center(
        child: RaisedButton(
          onPressed: () {
            final snackBar = SnackBar(
              content: Text('This is a SnackBar'),
              action: SnackBarAction(
                label: 'Undo',
                onPressed: () {
                  // do something
                },
              ),
            );
            Scaffold.of(context).showSnackBar(snackBar);
          },
          child: Text('Show SnackBar'),
        ),
      );
    },
  ),
)

四、Scaffold這個優秀的部件

總的來說，Scaffold作為Flutter開發中的一項基礎部件，其提供了一套完備的Material Design樣式的APP頁面框架，可以大大簡化APP開發的過程。其擁有AppBar、Drawer、FloatingActionButton等常用部分，並且還可以通過常用屬性進行靈活的配置，相信Scaffold這個優秀的部件會讓你的Flutter開發更加高效和優美。