网站建设属于什么行业分类,网站建设与维护期末试卷,万网域名官网,自学建百度首页网站Scaffold简介 相当于界面的主体#xff08;类似于安卓最外层PhoneWindow#xff09;#xff0c;组件的展示都必须依附于它。 使用场景#xff1a; 每一个界面都是脚手架#xff0c;通过它来进行架构实现#xff0c;优美的布局效果。 属性作用appBar顶部的标题栏body显示整…Scaffold简介 相当于界面的主体类似于安卓最外层PhoneWindow组件的展示都必须依附于它。 使用场景 每一个界面都是脚手架通过它来进行架构实现优美的布局效果。 属性作用appBar顶部的标题栏body显示整体布局floatingActionButton右下角按钮floatingActionButtonLocation按钮的位置floatingActionButtonAnimator按钮动画drawer左侧滑动组件onDrawerChanged滑动事件监听endDrawer右侧滑动组件onEndDrawerChanged编辑完成bottomNavigationBar底部菜单组件backgroundColor背景色persistentFooterButtons显示在基架底部的一组按钮resizeToAvoidBottomInset如果脚手架上方显示屏幕键盘则可以调整机身大小以避免与键盘重叠从而防止机身内部的小部件被键盘遮挡。 endDrawer 属性效果 endDrawer: Container(color: Colors.white,width: 200,child: Center(child: Column(children: [Text(测试endDrawer),Text(测试endDrawer),],),),)floatingActionButton 属性 floatingActionButtonLocation: 属性 startFloat、centerFloat、endFloat、 等几个属性 floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
floatingActionButton: FloatingActionButton(onPressed: () {},tooltip: Increment,child: const Icon(Icons.add),)body 属性代表布局的身体相当于红色这一区域 backgroundColor 整体红色区域部分的背景颜色 drawer 左侧滑动组件 drawer: Container(color: Colors.white,width: 200,child: Center(child: Column(children: [Text(测试drawer),Text(测试drawer),],),),),bottomNavigationBar 底部菜单栏按钮 bottomNavigationBar: BottomNavigationBar(items: const BottomNavigationBarItem[BottomNavigationBarItem(icon: Icon(Icons.home),label: 首页,),BottomNavigationBarItem(icon: Icon(Icons.search),label: 搜索,),BottomNavigationBarItem(icon: Icon(Icons.settings),label: 设置,),],currentIndex: _selectedIndex,selectedItemColor: Colors.blue,onTap: (index) {setState(() {_selectedIndex index;});},)persistentFooterButtons: 显示在基架底部的一组按钮。 persistentFooterAlignment: AlignmentDirectional.bottomEnd,persistentFooterButtons: [TextButton(onPressed: () {// 按钮1的点击事件处理逻辑},child: Text(按钮1),),TextButton(onPressed: () {// 按钮2的点击事件处理逻辑},child: Text(按钮2),),],整体代码块 import package:flutter/material.dart;class ScaffoldPage extends StatefulWidget {const ScaffoldPage({Key? key}) : super(key: key);overrideStateScaffoldPage createState() _ScaffoldPageState();
}class _ScaffoldPageState extends StateScaffoldPage {int _selectedIndex 0;ListWidget _widgetOptions [// 每个选项对应的页面或小部件// 可以根据需要替换为自己的页面或小部件Text(首页),Text(搜索),Text(设置),];overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text(测试脚手架),),backgroundColor: Colors.blueAccent,body: Center(child: _widgetOptions.elementAt(_selectedIndex),),endDrawer: Container(color: Colors.white,width: 200,child: Center(child: Column(children: [Text(测试endDrawer),Text(测试endDrawer),],),),),drawer: Container(color: Colors.white,width: 200,child: Center(child: Column(children: [Text(测试drawer),Text(测试drawer),],),),),bottomNavigationBar: BottomNavigationBar(items: const BottomNavigationBarItem[BottomNavigationBarItem(icon: Icon(Icons.home),label: 首页,),BottomNavigationBarItem(icon: Icon(Icons.search),label: 搜索,),BottomNavigationBarItem(icon: Icon(Icons.settings),label: 设置,),],currentIndex: _selectedIndex,selectedItemColor: Colors.blue,onTap: (index) {setState(() {_selectedIndex index;});},),floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,floatingActionButton: FloatingActionButton(onPressed: () {},tooltip: Increment,child: const Icon(Icons.add),),persistentFooterAlignment: AlignmentDirectional.bottomEnd,persistentFooterButtons: [TextButton(onPressed: () {// 按钮1的点击事件处理逻辑},child: Text(按钮1),),TextButton(onPressed: () {// 按钮2的点击事件处理逻辑},child: Text(按钮2),),],);}
}
项目地址
https://github.com/z244370114/flutter_demo
