首页 > 其他分享 >Flutter开发之Scaffold组件快速开发APP

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

时间:2022-10-28 17:01:49浏览次数:60  
标签:body Widget bottom APP Flutter bool Scaffold final

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,
      ),
    );
  }

上述代码运行起来的效果如下: image.png

标签:body,Widget,bottom,APP,Flutter,bool,Scaffold,final
From: https://blog.51cto.com/u_15777557/5805164

相关文章

  • app.config ConfigurationHelper
    usingSystem;usingSystem.Configuration;namespaceEncryptTool{///<summary>///用于XML操作///</summary>publicclassConfigurationHelp......
  • uniapp开发使用 web-view APP 与 H5 (vue)通信
    需求:这边是uniapp开发的APP 需要内嵌H5(vue),就得使用web-view跳转网页H5端在vue的index,html文件引入web-view的插件<scripttype="text/javascript"src="https://js......
  • 直播app开发,Vue动态设置样式和class名
    直播app开发,Vue动态设置样式和class名一、动态设置样式 <template><div:style="{backgroundImage:'url('+bgimg+')',fontSize:'size'}"></div></template><scri......
  • SpringCloud微服务实战——搭建企业级开发框架(四十八):【移动开发】整合uni-app搭建移动
      uni-app默认使用uni-ui全端兼容的、高性能UI框架,在我们开发过程中可以满足大部分的需求了,并且如果是为了兼容性,还是强烈建议使用uni-ui作为UI框架使用。  如果作为......
  • uniapp打包h5
    1.找到项目中 manifest.json---H5 配置---运行时的基础路径, 将路径修改为相对路径(./) 注意:1.运行的基础路径系统默认打包路径为绝对路径,如不改,打包时找不到......
  • uniapp 小程序自定义组件样式穿透问题
    1.正在开发时发现自定义组件间样式发生穿透问题  2.主需要引入下面代码可解决exportdefault{options:{//默认值isolated(启动隔离)//ap......
  • iOS-最全的App上架教程
    App上架教程在上架App之前想要真机测试的同学请查看iOS-最全的真机测试教程里面包含怎么让多台电脑同时上架App和同时真机调试。P12文件的使用详解因为最近更新......
  • 拍照引起app重启
    客户反应,一个拍照过程,app闪退后自动重启!本以为是内存不足造成的,最终发现,是在拍照的回调方法中,有时候会产生异常,正是这个异常造成的app重启。试图去补获这个异常,结论是无法......
  • 【spring框架】关于application.yml与bootstrap.yml相关配置(不断补充……)
    1.application.yml1.端口与全局访问前缀server:port:8081servlet:context-path:/qianzhui2.spring项目名、json设置全局Date格式spring:application:......
  • Flutter 路由
    flutter的路由简单使用跳转Navigator.of(context).push(MaterialPageRoute(builder:(context){returnTest();......