Flutter——最详细(Scaffold)使用教程

怀君

已于 2023-10-26 20:03:09 修改

阅读量4.8k

点赞数 5

分类专栏： flutter 文章标签： flutter

于 2023-10-26 19:54:07 首次发布

本文链接：https://blog.csdn.net/u013290250/article/details/134062782

版权

flutter 专栏收录该内容

27 篇文章 21 订阅

订阅专栏

本文详细介绍了Flutter中的Scaffold组件，包括其在界面构建中的作用，以及AppBar、body、floatingActionButton、endDrawer、drawer和bottomNavigationBar等关键属性的使用。展示了如何通过这些组件创建美观且功能丰富的用户界面。

摘要由CSDN通过智能技术生成

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

FloatingActionButtonLocation.startFloat
在这里插入图片描述

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

  @override
  State<ScaffoldPage> createState() => _ScaffoldPageState();
}

class _ScaffoldPageState extends State<ScaffoldPage> {
  int _selectedIndex = 0;

  List<Widget> _widgetOptions = [
    // 每个选项对应的页面或小部件
    // 可以根据需要替换为自己的页面或小部件
    Text('首页'),
    Text('搜索'),
    Text('设置'),
  ];

  @override
  Widget 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'),
        ),
      ],
    );
  }
}