Flutter开发之Scaffold组件快速开发APP

Scaffold包括的属性

const Scaffold(
{Key? key,
PreferredSizeWidget? appBar,
Widget? body,
Widget? floatingActionButton,
FloatingActionButtonLocation? floatingActionButtonLocation,
FloatingActionButtonAnimator? floatingActionButtonAnimator,
List<Widget>? persistentFooterButtons,
AlignmentDirectional persistentFooterAlignment = AlignmentDirectional.centerEnd,
Widget? drawer,
DrawerCallback? onDrawerChanged,
Widget? endDrawer,
DrawerCallback? onEndDrawerChanged,
Widget? bottomNavigationBar,
Widget? bottomSheet,
Color? backgroundColor,
bool? resizeToAvoidBottomInset,
bool primary = true,
DragStartBehavior drawerDragStartBehavior = DragStartBehavior.start,
bool extendBody = false,
bool extendBodyBehindAppBar = false,
Color? drawerScrimColor,
double? drawerEdgeDragWidth,
bool drawerEnableOpenDragGesture = true,
bool endDrawerEnableOpenDragGesture = true,
String? restorationId}
)

属性的解释

appBar → PreferredSizeWidget? An app bar to display at the top of the scaffold. final backgroundColor → Color? The color of the Material widget that underlies the entire Scaffold. final body → Widget? The primary content of the scaffold. final bottomNavigationBar → Widget? A bottom navigation bar to display at the bottom of the scaffold. final bottomSheet → Widget? The persistent bottom sheet to display. final drawer → Widget? A 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) final drawerDragStartBehavior → DragStartBehavior Determines the way that drag start behavior is handled. final drawerEdgeDragWidth → double? The width of the area within which a horizontal swipe will open the drawer. final drawerEnableOpenDragGesture → bool Determines if the Scaffold.drawer can be opened with a drag gesture on mobile. final drawerScrimColor → Color? The color to use for the scrim that obscures primary content while a drawer is open. final endDrawer → Widget? A 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) final endDrawerEnableOpenDragGesture → bool Determines if the Scaffold.endDrawer can be opened with a gesture on mobile. final extendBody → bool If true, and bottomNavigationBar or persistentFooterButtons is specified, then the body extends to the bottom of the Scaffold, instead of only extending to the top of the bottomNavigationBar or the persistentFooterButtons. final extendBodyBehindAppBar → bool If true, and an appBar is specified, then the height of the body is extended to include the height of the app bar and the top of the body is aligned with the top of the app bar. final floatingActionButton → Widget? A button displayed floating above body, in the bottom right corner. final floatingActionButtonAnimator → FloatingActionButtonAnimator? Animator to move the floatingActionButton to a new floatingActionButtonLocation. final floatingActionButtonLocation → FloatingActionButtonLocation? Responsible for determining where the floatingActionButton should go. final hashCode → int The hash code for this object. @nonVirtual, read-only, inherited key → Key? Controls how one widget replaces another widget in the tree. final, inherited onDrawerChanged → DrawerCallback? Optional callback that is called when the Scaffold.drawer is opened or closed. final onEndDrawerChanged → DrawerCallback? Optional callback that is called when the Scaffold.endDrawer is opened or closed. final persistentFooterAlignment → AlignmentDirectional The alignment of the persistentFooterButtons inside the OverflowBar. final persistentFooterButtons → List<Widget>? A set of buttons that are displayed at the bottom of the scaffold. final primary → bool Whether this scaffold is being displayed at the top of the screen. final resizeToAvoidBottomInset → bool? If true the body and the scaffold's floating widgets should size themselves to avoid the onscreen keyboard whose height is defined by the ambient MediaQuery's MediaQueryData.viewInsets bottom property. final restorationId → String? Restoration ID to save and restore the state of the Scaffold. final runtimeType → Type A representation of the runtime type of the object. read-only, inherited

使用

见下面的例子

 Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("WhatsApp"),
        elevation: 0.7,
        bottom: TabBar(
          controller: _tabController,
          indicatorColor: Colors.blue,
          tabs: <Widget>[
            Tab(icon: Icon(Icons.camera_alt)),
            Tab(text: "CHATS"),
            Tab(text: "STATUS"),
            Tab(text: "CALLS"),
          ],
        ),
        actions: <Widget>[
          Icon(Icons.search),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 5.0),
          ),
          Icon(Icons.more_vert)
        ],
      ),
      body: TabBarView(
        controller: _tabController,
        children: <Widget>[
          CameraScreen(widget.cameras),
          ChatScreen(),
          StatusScreen(),
          CallsScreen(),
        ],
      ),
      floatingActionButton: showFab
          ? FloatingActionButton(
              backgroundColor: Theme.of(context).accentColor,
              child: Icon(
                Icons.add,
                color: Colors.white,
              ),
              onPressed: () => debugDumpApp(),
            )
          : null,
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
        // currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }

上述代码运行起来的效果如下：