Flutter-Scaffold组件

在Flutter开发当中，我们可能会遇到以下的需求：

实现页面组合使用，比如说有悬浮按钮、顶部菜单栏、左右抽屉侧边栏、底部导航栏等等效果。

Scaffold组件可以帮我们实现上面需求说的效果。这篇博客主要分享容器组件的Scaffold组件的使用，希望对看文章的小伙伴有所帮助。

简单示例代码

1. Scaffold(
2. appBar:AppBar(
3. title:Text(widget.title),),
4. body:Center(
5. child:Column(
6. mainAxisAlignment: MainAxisAlignment.center,
7. children:<Widget>[constText(‘You have pushed the button this many times:’,),Text(‘$_counter’,
8. style: Theme.of(context).textTheme.headline4,),],),),
9. backgroundColor: Colors.yellow,
10. bottomNavigationBar:BottomAppBar(
11. color: Colors.white,
12. shape:constCircularNotchedRectangle(),
13. child:Container(
14. height:50,),),
15. floatingActionButton:FloatingActionButton(
16. onPressed: _incrementCounter,
17. tooltip:’Increment’,
18. child:constIcon(Icons.add),),
19. floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,)

效果如下所示：

image.png

组件源码

组件属性说明

这里针对源码做出相应的属性说明，熟悉控件的属性方便大家的使用。

完整的源码

以下的代码，可以直接复制到编译器去运行，方便小伙伴查看运行结果或者直接使用：

1. import’package:flutter/material.dart’;voidmain(){runApp(constMyApp());}classMyAppextendsStatelessWidget{constMyApp({Key? key}):super(key: key);// This widget is the root of your application.@overrideWidgetbuild(BuildContext context){returnMaterialApp(
2. title:’Flutter Demo’,
3. theme:ThemeData(
4. primarySwatch:Colors.blue,),
5. home:constMyHomePage(title:’Flutter Demo Home Page’),);}}classMyHomePageextendsStatefulWidget{constMyHomePage({Key? key, required this.title}):super(key: key);finalString title;@overrideState<MyHomePage>createState()=>_MyHomePageState();}class _MyHomePageState extendsState<MyHomePage>{int _counter =0;void_incrementCounter(){setState((){
6. _counter++;});}@overrideWidgetbuild(BuildContext context){returnScaffold(
7. appBar:AppBar(
8. title:Text(widget.title),),
9. body:Center(
10. child:Column(
11. mainAxisAlignment:MainAxisAlignment.center,
12. children:<Widget>[constText(‘You have pushed the button this many times:’,),Text(‘$_counter’,
13. style:Theme.of(context).textTheme.headline4,),],),),
14. backgroundColor:Colors.yellow,
15. bottomNavigationBar:BottomAppBar(
16. color:Colors.white,
17. shape:constCircularNotchedRectangle(),
18. child:Container(
19. height:50,),),
20. floatingActionButton:FloatingActionButton(
21. onPressed: _incrementCounter,
22. tooltip:’Increment’,
23. child:constIcon(Icons.add),),
24. floatingActionButtonLocation:FloatingActionButtonLocation.centerDocked,);}}