Flutter 组件之 Scaffold

作者: Abner_XuanYuan | 来源:发表于2023-10-13 09:54 被阅读0次

Flutter导航组件之Scaffold
Flutter 基础组件之 Scaffold
Flutter（10）：基础组件之Scaffold
Flutter-Scaffold组件
Flutter跨平台移动端开发丨底部导航栏 Tab
Flutter之Scaffold
【Flutter】基础组件【03】Scaffold
flutter3.0开发——02.Flutter一些相关组件的使
Flutter(Widget)基本组件
Flutter控件之Scaffold

1、Scaffold 属性

Scaffold Scaffold({
  Key? key,
  PreferredSizeWidget? appBar,    //页面上方导航条
  Widget? body,    //页面容器
  Widget? floatingActionButton,    //悬浮按钮
  FloatingActionButtonLocation? floatingActionButtonLocation,    //悬浮按钮位置
  FloatingActionButtonAnimator? floatingActionButtonAnimator,   //悬浮按钮动画
  List<Widget>? persistentFooterButtons,    //显示在底部导航条上方的一组按钮
  AlignmentDirectional persistentFooterAlignment = AlignmentDirectional.centerEnd,  //底部按钮对齐方式
  Widget? drawer,    //左侧菜单
  void Function(bool)? onDrawerChanged,    //左侧菜单发生变化
  Widget? endDrawer,    //右侧菜单
  void Function(bool)? onEndDrawerChanged,  // //右侧菜单发生变化
  Widget? bottomNavigationBar,    //底部导航条
  Widget? bottomSheet,    //一个持久停留在body下方，底部控件上方的控件
  Color? backgroundColor,    //背景色
  bool? resizeToAvoidBottomInset,    //默认为 true，防止一些小组件重复
  bool primary = true,  //是否在屏幕顶部显示 Appbar, 默认为 true，Appbar 是否向上延伸到状态栏，如电池电量，时间那一栏
  DragStartBehavior drawerDragStartBehavior = DragStartBehavior.start,  //控制 drawer 的一些特性
  bool extendBody = false,  //body 是否延伸到底部控件
  bool extendBodyBehindAppBar = false,  //默认 false，为 true 时，body 会置顶到 appbar 后，如appbar 为半透明色，可以有毛玻璃效果
  Color? drawerScrimColor,  //侧滑栏拉出来时，用来遮盖主页面的颜色
  double? drawerEdgeDragWidth,  //侧滑栏拉出来时，用来遮盖主页面的颜色
  bool drawerEnableOpenDragGesture = true,  //左侧侧滑栏是否可以滑动
  bool endDrawerEnableOpenDragGesture = true,  //右侧侧滑栏是否可以滑动
  String? restorationId,    //状态还原标识符
})

2、BottomNavigationBar：底部导航属性

BottomNavigationBar BottomNavigationBar({
  Key? key,
  required List<BottomNavigationBarItem> items,  //List 底部导航条按钮集合
  void Function(int)? onTap,    //选中变化回调函数
  int currentIndex = 0,    //当前选中 item 下标
  double? elevation,  //控制阴影高度，默认为 8.0
  BottomNavigationBarType? type,    //BottomNavigationBarType，默认 fixed，设置为 shifting 时，建议设置选中样式，和为选中样式，提供一个特殊动画.
  Color? fixedColor,    //选中的颜色
  Color? backgroundColor,    //整个 BottomNavigationBar 背景色
  double iconSize = 24.0,    //图标大小，默认 24.0
  Color? selectedItemColor,    //选中 title 填充色
  Color? unselectedItemColor,  //未选中 title 填充色
  IconThemeData? selectedIconTheme,    //选中 item 图标主题
  IconThemeData? unselectedIconTheme,    //未选中 item 图标主题
  double selectedFontSize = 14.0,    //选中 title 字体大小，默认14.0
  double unselectedFontSize = 12.0,    //未选中 title 字体大小，默认12.0
  TextStyle? selectedLabelStyle,    //选中 title 样式 TextStyle
  TextStyle? unselectedLabelStyle,    //未选中 title 样式 TextStyle
  bool? showSelectedLabels,    //是否展示选中 title，默认为true
  bool? showUnselectedLabels,    //是否展示未选中 title，默认为true
  MouseCursor? mouseCursor,    //鼠标悬停，Web 开发可以了解
  bool? enableFeedback,    //是否启动点击反馈 例如 安卓上的长按震动
  BottomNavigationBarLandscapeLayout? landscapeLayout,    //横向布局方式 横屏时有效
  bool useLegacyColorScheme = true,    //是否使用传统颜色方案，默认 true
})

3、bottomNavigationBar 示例

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Demo",
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const customNavigationBar(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text("测试文案"),
    );
  }
}

///底部导航栏
// ignore: camel_case_types
class customNavigationBar extends StatefulWidget {
  const customNavigationBar({super.key});

  @override
  State<customNavigationBar> createState() => _customNavigationBarState();
}

// ignore: camel_case_types
class _customNavigationBarState extends State<customNavigationBar> {
  int _currentSelect = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: const HomePage(),
      appBar: AppBar(
        title: const Text("Scaffold"),
        backgroundColor: Colors.green,
      ),
      bottomNavigationBar: BottomNavigationBar(
        selectedFontSize: 12.0,
        currentIndex: _currentSelect,
        type: BottomNavigationBarType.fixed,  //如果底部有4个或者4个以上的菜单的时候就需要配置这个参数
        onTap: (value) {
          setState(() {
            _currentSelect = value;
          });
        },
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
              icon: Icon(
                Icons.home,
                size: 20,
              ),
              label: "首页"),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.category,
                size: 20,
              ),
              label: "分类"),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.details,
                size: 20,
              ),
              label: "详情"),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.settings,
                size: 20,
              ),
              label: "设置"),
        ],
      ), //底部导航
    );
  }
}

4、FloatingActionButton：实现类似闲鱼 App 底部导航凸起按钮

//仅将上述代码中的 _customNavigationBarState 方法更改一下即可
// ignore: camel_case_types
class _customNavigationBarState extends State<customNavigationBar> {
  int _currentSelect = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      body: const HomePage(), //在此加载各个 tab 的主体
      appBar: AppBar(
        title: const Text("Scaffold"),
        backgroundColor: Colors.green,
      ),
      bottomNavigationBar: BottomNavigationBar(
        selectedFontSize: 12.0,
        currentIndex: _currentSelect,
        type: BottomNavigationBarType.fixed, //如果底部有4个或者4个以上的菜单的时候 就需要配置这个参数
        onTap: (value) {
          setState(() {
            _currentSelect = value;
          });
        },
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
              icon: Icon(
                Icons.home,
                size: 20,
              ),
              label: "首页"),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.category,
                size: 20,
              ),
              label: "分类"),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.message,
                size: 20,
              ),
              label: "消息"),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.details,
                size: 20,
              ),
              label: "详情"),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.settings,
                size: 20,
              ),
              label: "设置"),
        ],
      ), //底部导航
      floatingActionButton: Container(
        width: 60,
        height: 60,
        padding: const EdgeInsets.all(4),
        margin: const EdgeInsets.all(4),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(30),
        ),
        child: FloatingActionButton(
            backgroundColor: _currentSelect == 2 ? Colors.red : Colors.blue,
            child: const Icon(Icons.add),
            onPressed: () {
              setState(() {
                _currentSelect = 2;
              });
            }),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }
}

5、Drawer：抽屉菜单

在 Scaffold 组件里面传入 drawer 参数可以定义左侧边栏，传入 endDrawer 可以定义右侧边栏。侧边栏默认是隐藏的，我们可以通过手指滑动显示侧边栏，也可以通过点击按钮显示侧边栏。

///Drawer
class HomePage1 extends StatelessWidget {
  const HomePage1({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Drawer"),
        foregroundColor: Colors.red,
      ),
      drawer: const Drawer(
        backgroundColor: Colors.red,
        width: 200,
        semanticLabel: "左侧",
        shadowColor: Colors.blue,
        child: Text("左侧边栏"),
      ),
      endDrawer: const Drawer(
        backgroundColor: Colors.blue,
        width: 250,
        semanticLabel: "右侧",
        child: Text("右侧边栏"),
      ),
      onDrawerChanged: (isOpened) {
        //左侧边栏打开/关闭
        print("左侧边栏 -- $isOpened");
      },
      onEndDrawerChanged: (isOpened) {
        //右侧边栏打开/关闭
        print("右侧边栏 -- $isOpened");
      },
      body: const HomePage(),
    );
  }
}

6、DrawerHeader：设置侧边栏头视图

DrawerHeader DrawerHeader({
  Key? key,
  Decoration? decoration,    //header区域的背景
  EdgeInsetsGeometry? margin = const EdgeInsets.only(bottom: 8.0),    //外边距
  EdgeInsetsGeometry padding = const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 8.0),  //内边距
  Duration duration = const Duration(milliseconds: 250),  //decoration背景发生变化时动画时间
  Curve curve = Curves.fastOutSlowIn,    //decoration背景发生curve曲线变化
  required Widget? child,
})

///DrawerHeader
class HomePage1 extends StatelessWidget {
  const HomePage1({super.key});

  @override
  Widget build(BuildContext context) {
    //获取屏幕的宽高
    final size = MediaQuery.of(context).size;

    return Scaffold(
      appBar: AppBar(
        title: const Text("DrawerHeader"),
        backgroundColor: Colors.green,
      ),
      body: const Center(
        child: Text("DrawerHeader 测试文案"),
      ),
      drawer: Drawer(
        //左侧边栏
        backgroundColor: Colors.white,
        width: size.width * 2 / 3,
        child: const Center(
          child: Column(
            children: [
              DrawerHeader(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(10)),
                    // border: Border(
                    //   left: BorderSide(color: Colors.green),
                    //   // top: BorderSide(strokeAlign: 5),
                    //   right: BorderSide(width: 10),
                    //   bottom: BorderSide(style: BorderStyle.solid),
                    // ),
                    color: Colors.grey,
                    image: DecorationImage(
                        image: NetworkImage(
                            "https://www.itying.com/images/flutter/1.png"),
                        fit: BoxFit.cover),
                  ),
                  child: Center(
                    child: Text(
                      "DrawerHeader",
                      style: TextStyle(color: Colors.red, fontSize: 50),
                    ),
                  )),
              ListTile(
                leading: CircleAvatar(
                  backgroundColor: Colors.green,
                  foregroundColor: Colors.white,
                  radius: 20,
                  child: Icon(Icons.people),
                ),
                title: Text("个人中心"),
                titleTextStyle: TextStyle(
                    fontSize: 12,
                    color: Colors.black,
                    fontWeight: FontWeight.bold),
              ),
              Divider(
                color: Colors.red,
                height: 5,
              ),
              ListTile(
                leading: CircleAvatar(
                  backgroundColor: Colors.green,
                  foregroundColor: Colors.white,
                  radius: 20,
                  child: Icon(Icons.settings),
                ),
                title: Text("系统设置"),
                titleTextStyle: TextStyle(
                    color: Colors.black,
                    fontSize: 12,
                    fontWeight: FontWeight.w700),
              ),
              Divider(
                color: Colors.red,
                height: 5,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

7、UserAccountsDrawerHeader

UserAccountsDrawerHeader UserAccountsDrawerHeader({
  Key? key,
  Decoration? decoration,    //Header的背景样式
  EdgeInsetsGeometry? margin = const EdgeInsets.only(bottom: 8.0),    //外边距
  Widget? currentAccountPicture,    //用户头像
  List<Widget>? otherAccountsPictures,    //别的头像集合
  Size currentAccountPictureSize = const Size.square(72.0),  //用户头像大小
  Size otherAccountsPicturesSize = const Size.square(40.0),  //别的头像集合大小
  required Widget? accountName,    //用户名
  required Widget? accountEmail,    //用户email
  void Function()? onDetailsPressed,  //accountName 或者 accountEmail 被点击的时候所触发的回调函数
  Color arrowColor = Colors.white,
})

class HomePage1 extends StatelessWidget {
  const HomePage1({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("DrawerHeader"),
        backgroundColor: Colors.green,
      ),
      body: const Center(
        child: Text("DrawerHeader 测试文案"),
      ),
      drawer: Drawer(
        child: Column(
          children: [
            UserAccountsDrawerHeader(
              accountName: const Text("AbnerXuan"),
              accountEmail: const Text("1051698135@qq.com"),
              decoration: const BoxDecoration(
                color: Colors.red,
                image: DecorationImage(
                    image: NetworkImage(
                        "https://www.itying.com/images/flutter/1.png"),
                    fit: BoxFit.cover),
              ),
              // margin: const EdgeInsets.all(10),
              currentAccountPicture: const CircleAvatar(
                backgroundImage:
                    NetworkImage("https://www.itying.com/images/flutter/2.png"),
              ),
              // currentAccountPictureSize: const Size(80, 80),
              otherAccountsPictures: [
                Image.network("https://www.itying.com/images/flutter/3.png"),
                Image.network("https://www.itying.com/images/flutter/4.png"),
                Image.network("https://www.itying.com/images/flutter/5.png"),
                Image.network("https://www.itying.com/images/flutter/6.png"),
              ],
              // otherAccountsPicturesSize: const Size(50, 50),
              arrowColor: Colors.white,
              onDetailsPressed: () {
                print("accountName/accountEmail 被点击的时候所触发的回调函数");
              },
            ),
            const ListTile(
              leading: CircleAvatar(
                backgroundColor: Colors.green,
                foregroundColor: Colors.white,
                radius: 20,
                child: Icon(Icons.people),
              ),
              title: Text("个人中心"),
              titleTextStyle: TextStyle(
                  fontSize: 12,
                  color: Colors.black,
                  fontWeight: FontWeight.bold),
            ),
            const Divider(
              color: Colors.red,
              height: 5,
            ),
            const ListTile(
              leading: CircleAvatar(
                backgroundColor: Colors.green,
                foregroundColor: Colors.white,
                radius: 20,
                child: Icon(Icons.settings),
              ),
              title: Text("系统设置"),
              titleTextStyle: TextStyle(
                  color: Colors.black,
                  fontSize: 12,
                  fontWeight: FontWeight.w700),
            ),
            const Divider(
              color: Colors.red,
              height: 5,
            ),
          ],
        ),
      ),
    );
  }
}

Flutter导航组件之Scaffold
Scaffold 是承载material design 控件的布局控件，可以展示drawers、snack bar...
Flutter 基础组件之 Scaffold
Scaffold 是一个页面布局脚手架，实现了基本的Material布局,总所周知，大部分页面都包含了标题栏，主体...
Flutter（10）：基础组件之Scaffold
Flutter教学目录[https://www.jianshu.com/p/3320350b3814]持续更新中 ...
Flutter-Scaffold组件
在Flutter开发当中，我们可能会遇到以下的需求：实现页面组合使用，比如说有悬浮按钮、顶部菜单栏、左右抽屉侧边...
Flutter跨平台移动端开发丨底部导航栏 Tab
Flutter 底部栏实现思路使用flutter实现底部导航栏还是比较简单的，主要用到的组件是 Scaffold...
Flutter之Scaffold
Scaffold 实现了基本的纸墨设计布局结构。在示例应用中，MyHomePage 所返回的就是一个 Scaffo...
【Flutter】基础组件【03】Scaffold
?【Flutter】学习养成记，【程序员必备小知识】 ? 今日小知识——【Flutter】基础组件【03】Scaf...
flutter3.0开发——02.Flutter一些相关组件的使
在flutter中所有的组件都应该在放在MaterialApp—>Scaffold中这是固定写法运行之后如下图...
Flutter(Widget)基本组件
Center Text MaterialApp组件 scaffold组件 Container组件 Image组件
Flutter控件之Scaffold