Flutter开发 了解Scaffold

Text组件属性基本了解

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

Scaffold

布局结构的脚手架。

属性介绍:

body:主要内容,由多个Widget元素组成。

backgroundColor:设置当前页面的内容的背景色。默认使用的事Theme

dart 复制代码
Scaffold(
        body: Center(child: Text("data")),
        backgroundColor: Colors.white,
      )

appBar:顶部标题栏

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

示例

dart 复制代码
  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 点击事件
dart 复制代码
    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: 抽屉组件

dart 复制代码
 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配置图片

yaml 复制代码
flutter:
  assets:
    - images/account.jpg

floatingActionButton:悬停在内容上面的按钮

dart 复制代码
  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,//按钮位置
      ),
    );
  }
相关推荐
菠萝加点糖28 分钟前
Android 使用MediaMuxer+MediaCodec编码MP4视频
android·音视频·编码
明月看潮生1 小时前
编程与数学 02-017 Python 面向对象编程 23课题、测试面向对象的程序
开发语言·python·青少年编程·面向对象·编程与数学
ideal树叶1 小时前
flutter 中 的 关键字
flutter
TPBoreas1 小时前
架构设计模式七大原则
java·开发语言
雨白1 小时前
手写 MaterialEditText:实现浮动标签(Floating Label)效果
android
nightunderblackcat2 小时前
新手向:Python开发简易股票价格追踪器
开发语言·python
熙客3 小时前
Java:LinkedList的使用
java·开发语言
CYRUS_STUDIO3 小时前
使用 readelf 分析 so 文件:ELF 结构解析全攻略
android·linux·逆向
大飞pkz4 小时前
【Lua】题目小练12
开发语言·lua·题目小练