Flutter开发 了解Scaffold

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,//按钮位置
      ),
    );
  }