当前位置：首页 > news >正文

Flutter开发了解Scaffold

news 2025/8/5 6:43:07

Text组件属性基本了解

Text("第一个flutter应用",style: TextStyle(color: Colors.green, //颜色fontSize: 25, //字体大小decoration: TextDecoration.none, //下划线),)

Scaffold

布局结构的脚手架。
属性介绍：

body：主要内容，由多个Widget元素组成。
backgroundColor：设置当前页面的内容的背景色。默认使用的事Theme

Scaffold(body: Center(child: Text("data")),backgroundColor: Colors.white,)

appBar：顶部标题栏

appBar属性名	说明
title	标题栏的文本内容
leading	左边图标
iconTheme	图标的颜色
actions	右边图标
centerTitle	居中

示例
在这里插入图片描述

  Widget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo', //任务管理窗口中显示的应用程序标题theme: ThemeData(//主题colorScheme: ColorScheme.fromSeed(seedColor: Colors.red),),home: Scaffold(appBar: AppBar(title: Text("测试主题色-主页", style: TextStyle(color: Colors.orange)),backgroundColor: Colors.red,leading: Icon(Icons.menu),iconTheme: IconThemeData(color: Colors.green),actions: [IconButton(icon: Icon(Icons.add), onPressed: () {}),IconButton(icon: Icon(Icons.menu), onPressed: () {}),],centerTitle: true,),body: Center(child: Text("data")),backgroundColor: Colors.white,),);}

bottomNavigationBar：底部导航栏

bottomNavigationBar属性	说明
items	点击项
currentIndex	选中项的下标
onTap	点击事件

在这里插入图片描述

    return MaterialApp(title: 'Flutter Demo', //任务管理窗口中显示的应用程序标题theme: ThemeData(//主题colorScheme: ColorScheme.fromSeed(seedColor: Colors.red),),home: Scaffold(......bottomNavigationBar: BottomNavigationBar(items: [//选项BottomNavigationBarItem(icon: Icon(Icons.add), label: "首页"),BottomNavigationBarItem(icon: Icon(Icons.access_alarm), label: "搜索"),BottomNavigationBarItem(icon: Icon(Icons.account_box), label: "我的"),],onTap: (value) {//点击事件print(value);},currentIndex: 1,//当前选择),),);

drawer：抽屉组件
在这里插入图片描述

 Widget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo', //任务管理窗口中显示的应用程序标题theme: ThemeData(//主题colorScheme: ColorScheme.fromSeed(seedColor: Colors.red),),home: Scaffold(.......drawer: Drawer(//左边抽屉child: ListView(children: [UserAccountsDrawerHeader(//用户信息部分accountName: Text("用户名"),accountEmail: Text("xxxx@163.com"),currentAccountPicture: CircleAvatar(backgroundImage: AssetImage("images/account.jpg"),),//本体图片的头像onDetailsPressed: () {print("点击头像");},),ListTile(//列表信息leading: Icon(Icons.school),title: Text("学校"),subtitle: Text("毕业院校"),),ListTile(leading: Icon(Icons.school),title: Text("学校2"),subtitle: Text("毕业院校"),),],),),),);}

添加本地account.jpg图片，创建images，存放图片。
在这里插入图片描述
在pubspec.yaml配置图片

flutter:assets:- images/account.jpg

floatingActionButton：悬停在内容上面的按钮
在这里插入图片描述

  Widget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo', //任务管理窗口中显示的应用程序标题theme: ThemeData(//主题colorScheme: ColorScheme.fromSeed(seedColor: Colors.red),),home: Scaffold(.......floatingActionButton: FloatingActionButton(onPressed: () {},child: Icon(Icons.print),//图标foregroundColor: Colors.red,backgroundColor: Colors.green,elevation: 4,//默认阴影highlightElevation: 20,//点击阴影mini: true,//是否使用小图标),floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,//按钮位置),);}