Flutter基础

Drawer使用

mainPage.dart

// ignore_for_file: unused_import, prefer_const_constructors, prefer_const_literals_to_create_immutables

import 'package:flutter/material.dart';
import 'widget/drawerPage.dart';

main() => runApp(myApp());

class myApp extends StatelessWidget {
  const myApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "myApp",
      home: DrawerPage(),
      // 设置默认路由，如果没有该路由，则会报错
      initialRoute: '/hemo',
      // 这里配置路由表，键-》路由名，值-》跳转的页面
      routes: {
        '/main': (BuildContext context) => MainPage(),  
        '/news': (BuildContext context) => NewsPage(),
        '/drawer':(BuildContext context) => DrawerPage(),
      },
      // 设置默认路由，pageBuilder第三个参数是两根下划线
      onGenerateRoute: (setting){
        return PageRouteBuilder(pageBuilder: (BuildContext,_,__){
          return DrawerPage();
        });
      },
      // theme设置主题
      theme: ThemeData(
        // 设置全局主题颜色
        primarySwatch: Colors.green,
        primaryColor: Colors.orange,
        accentColor: Colors.pink,
        shadowColor: Colors.purple
        ),
      
      // 右上角debug图标
      debugShowCheckedModeBanner: false,
    );
  }
}

drawerPage.dart

// ignore_for_file: unused_import, file_names, prefer_const_constructors, prefer_const_literals_to_create_immutables, use_key_in_widget_constructors, deprecated_member_use

import 'package:flutter/material.dart';

class DrawerPage extends StatelessWidget {
  var selector = 0;
  List<String> _list = ["游泳馆", "羽毛球场", "篮球场", "拳击场"];

  List<Widget> _result() {
    return _list
        .map((itme) => ListTile(
              title: Text(itme),
              leading: Icon(Icons.sports_soccer),
              subtitle: Text("挥洒汗水逐梦的土地"),
              onTap: () {},
            ))
        .toList();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("DrawerPage"),
        // 添加图标按钮，并为它绑定点击事件，用于打开Drawer
        leading: Builder(builder: (BuildContext context){
          return IconButton(icon: Icon(Icons.list), onPressed: () { 
            Scaffold.of(context).openDrawer();
           },);
        },),
        elevation: 15.0,
      ),
      
      // 添加底部状态栏的三个切换按钮，其中itmes的个数
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
              icon: Icon(
                Icons.add_a_photo,
              ),
              title: Text("照相")),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.center_focus_strong,
              ),
              title: Text("扫码")),
          BottomNavigationBarItem(
              icon: Icon(Icons.safety_divider), title: Text("pay"))
        ],
        // 获取底部 BottomNavigationBarItem的索引下标
        onTap: (value) {
          selector = value;
          print(value);
        },
        // 设置底部选择，结合点击事件可以切换选项
        currentIndex: selector,
      ),
      
      // 添加左侧侧边栏
      drawer: Drawer(
        // 添加listView
        child: ListView(
          children:
              // 使用遍历方式将数据取出放入children，注意这个这个函数是widget数组，不需要加中括号
              // _result(),
            [
              UserAccountsDrawerHeader(accountName: Text("泸州彭于晏"), accountEmail: Text("Ciy@163.com"),currentAccountPicture: CircleAvatar(backgroundImage: AssetImage("images/girl.jpg"),),onDetailsPressed: ()=>print("你点击用户名片"),),
              ListTile(title: Text("学校"),leading: Icon(Icons.school),subtitle: Text("充满师生情怀的圣地"),onTap: ()=>print("你点击了学校"),),
              ListTile(title: Text("食堂"),leading: Icon(Icons.dining),subtitle: Text("皆是学生恋爱的宝地"),onTap: ()=>print("你点击了食堂"),),
              ListTile(title: Text("操场"),leading: Icon(Icons.sports_soccer),subtitle: Text("挥洒汗水逐梦的土地"),onTap: (){},),
          ]
        ),
      ),
      
      // floatingActionButton 添加浮动圆形按钮组件
      floatingActionButton: FloatingActionButton(onPressed: () { print("你点击了打印按钮"); },
      child: Icon(Icons.print),
      // 长按提示文本
      tooltip: '打印文档',
      // 设置前景色，默认是白色
      foregroundColor: Colors.red,
      // 设置背景色，默认是洋红色
      backgroundColor: Colors.teal,
      // 设置焦点颜色
      focusColor: Colors.orange,
      // 设置点击时的阴影颜色
      highlightElevation: 30,
      // 设置没有点击时的阴影颜色
      elevation: 30,
      // 设置图标为mini类型
      mini: true,
      ),
      
      // 设置浮动图标的显示位置
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      
      // 允许底部Button，这里面可以添加多个Button，使用的不多
      persistentFooterButtons: <Widget>[
        FlatButton(onPressed: (){print("确定");}, child: Text("确定")),
        TextButton(onPressed: (){print("取消");}, child: Text("取消"))
      ],
    );
  }
}

text

TextFeild

// ignore_for_file: file_names, unused_import, prefer_const_constructors

import 'package:flutter/material.dart';

class TextFieldDemo extends StatelessWidget {
  const TextFieldDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("TextFieldDemo"),
      ),
      body: TextFieldPage(),
    );
  }
}

class TextFieldPage extends StatelessWidget {
  // 创建一个InputDecoration对象，在后面内容中直接使用该对象
  InputDecoration inputDecoration = InputDecoration(
          icon: Icon(Icons.person),
          labelText: "用户名",
          // 设置labelText的浮动标签行为,never为永不，auto为自动，always为永远展示
          floatingLabelBehavior: FloatingLabelBehavior.never,
          // 设置label的样式
          labelStyle: TextStyle(color: Colors.greenAccent),
          // 设置
          helperText: "用户名只能是字母、数字、下划线",
          errorText: "对不起，你输入的用户名中包含了。。。",
          // 设置输入框的提示文本
          hintText: "请输入用户名",
          // 设置输入框提示文本的样式
          hintStyle: TextStyle(color: Colors.orangeAccent),
          // 设置前置显示文本、图标
          prefixText: "0831",
          prefixIcon: Icon(Icons.phone_android),
          // 设置后置显示文本、图标
          suffixText: "中国",
          suffixIcon: Icon(Icons.flag),
          // 设置输入框右下方显示的文本
          // counterText: "文本有10个字吗？",
          // 设置输入框右下角的小组件，该位置只能有一个组件
          counter: Icon(Icons.question_answer),
          // 设置是否填充
          filled: true,
          // 设置填充颜色
          fillColor: Colors.grey[200],
        );

  @override
  Widget build(BuildContext context) {
    return Container(
      child: TextField(
        // 设置输入的字符数，超出该长度之后无法输入
        maxLength: 10,
        // 设置输入的字符达到长度的时候，还可以继续输，会在文本框右下角提示
        maxLengthEnforced: false,
        // 设置输入的行数
        maxLines: 1,
        // 设置隐藏输入的内容，产用于密码，maxlines为多行时会报错
        obscureText: false,
        // 设置长按之后是否出现“剪切/复制/粘贴”菜单
        enableInteractiveSelection: false,
        // 设置输入字符的大小写，必须是模拟器上面的键盘才可以自动改变大小写
        textCapitalization: TextCapitalization.words,
        // 设置输入内容时软键盘的类型，如：text、url、dateTime、number、phone、emailAddress、name、
        keyboardType: TextInputType.text,
        // 设置键盘上动作按钮的的类型
        textInputAction: TextInputAction.search,

        // 事件
        // 输入框输入文本发生变化发生变化是回调方法
        onChanged: (value) {
          print("onChanged:" + value);
        },
        // 点击搜索框时返回的回调
        onTap: () {
          print("onTap:" + "你点击了搜索框");
        },
        // 设置点击键盘的动作按钮时的回调
        onEditingComplete: () {
          print('onEditingComplete:' + "你在键盘上点击了提交");
        },
        // 参数就是你输入的值
        onSubmitted: (value) {
          print("onsubmitted:" + value);
        },

        decoration: inputDecoration,

        // 设置输入框的修饰    调用上面定义的对象
      //   decoration: InputDecoration(
      //     prefixIcon: Icon(Icons.phone),
      //     prefixText: "0836",

      //     // 设置只有下边框线的输入框样式，不常用
      //     // border: UnderlineInputBorder(
      //     //   borderRadius: BorderRadius.all(Radius.circular(20)),
      //     //   borderSide: BorderSide(color: Colors.red),
      //     // ),

      //     // 控制输入框外边框样式的常用属性，常用
      //     enabledBorder: OutlineInputBorder(
      //         borderRadius: BorderRadius.all(Radius.circular(10)),
      //         borderSide: BorderSide(
      //             color: Colors.orangeAccent,
      //             width: 6,
      //             style: BorderStyle.solid)),

      //     // 设置获得焦点之后的边框样式
      //     focusedBorder: OutlineInputBorder(
      //         borderRadius: BorderRadius.all(Radius.circular(5)),
      //         borderSide: BorderSide(
      //           color: Colors.pink,
      //           width: 10,
      //         )),
      //   ),
      // ),
    )
    );
  }
}

TextFeilfdController

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 定义初始值
  String info ="初始值";
  // 定义一个controller对象之后，整个类里面都可以使用，并且将它与TextFeild的controller进行绑定
  TextEditingController controller1 = TextEditingController();
  // 创建一个方法并重写setState方法，告诉脚手架进行重写绘制该界面
  void getValue(){
    setState(() {
      // 取出controller1的值赋值给info变量，进行传递给Text进行显示
      info = controller1.text;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "ContorllerDemo",
        ),
      ),
      body: Column(
        children: [
          TextField(controller: controller1,),
          Text(info),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        child: Text("确定"),
        onPressed: () {
          getValue();
        },
      ),
    );
  }
}

Button

RaisedButton --漂浮按钮

// 漂浮按钮
RaisedButton(
            onPressed: () {}, // 单击事件，
            child: Text("漂浮按钮"), // 设置按钮文本
            textColor: Colors.blue, // 设置按钮颜色
            highlightColor: Colors.lightGreen[100], // 设置长按按钮颜色
            splashColor: Colors.orangeAccent, // 设置水波纹颜色
            colorBrightness: Brightness.light, //设置高亮显示,默认不高亮
            elevation: 10,  // 设置按钮阴影高度
            highlightElevation: 50,// 设置高亮时的阴影颜色
            // 带水波纹高亮变化的回调函数，按下为true，松开
            onHighlightChanged: (value) {
              print(value);
            }, // 按钮名称
          ),

// ignore_for_file: unused_import, file_names, prefer_const_constructors, prefer_const_literals_to_create_immutables

import 'package:flutter/material.dart';

class buttonDemo extends StatelessWidget {
   
  const buttonDemo({
   Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
   
    return Scaffold(
      appBar: AppBar(
        title: Text("buttonDemo"),
        elevation: 10.0,
        leading: Icon(Icons.menu),
        actions: [Icon(Icons.settings)],
      ),
      body: buttonPage(),
    );
  }
}

class buttonPage extends StatelessWidget {
   
  const buttonPage({
   Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
   
    return Center(
      child: Column(
        children: [
          RaisedButton(
            // 设置漂浮按钮
            onPressed: () {
   }, // 单击事件，
            child: Text("漂浮按钮"), // 设置按钮文本
            textColor: Colors.blue, // 设置按钮颜色
            highlightColor: Colors.lightGreen[100], // 设置长按按钮颜色
            splashColor: Colors.orangeAccent, // 设置水波纹颜色
            colorBrightness: Brightness.light, //设置高亮显示,默认不高亮
            elevation: 10, // 设置按钮阴影高度
            highlightElevation: 50, // 设置高亮时的阴影颜色
            // 带水波纹高亮变化的回调函数，按下为true，松开
            onHighlightChanged: (value) {
   
              print(value);
            }, // 按钮名称
          ),
          // 漂浮按钮
          FlatButton(
            onPressed: () {
   }, // 设置漂浮按钮
            child: Text("扁平按钮"), // 点击事件
            textColor: Colors.deepOrange, //文本颜色
            height: 50, // 按钮高度
            color: Colors.lightGreen[100], //设置背景颜色
          ),

          //带图标的漂浮按钮
          FlatButton.icon(
            // 带图标的漂浮按钮
            onPressed: () {
   },
            icon: Icon(Icons.add),
            label: Text("添加"),
            color: Colors.blueGrey,
            textColor: Colors.white,
          ),

          // 边框按钮
          OutlineButton(
            // 有边框不带阴影的按钮，用的比较少
            // 单击事件
            onPressed: () {
   
              print("你点击了outlineButton");
            },
            // 设置长按事件
            onLongPress: () {
   
              print("你长按了outlineButton");
            },
            child: Column(
              children: [Icon(Icons.input), Icon(Icons.outbox)],
            ),
            color: Colors.green,
            focusColor: Colors.black45,
            textColor: Colors.green,
            padding: const EdgeInsets.all(30.0), // 设置按钮的内边距
            borderSide: BorderSide(color: Colors.red),
          ),

          // 图标按钮
          IconButton(
            onPressed: () {
   }, // 按钮点击事件
            icon: Icon(Icons.home), // 按钮图标
            color: Colors.green[200], // 按钮颜色
            iconSize: 30.0, // 按钮大小
            padding: const EdgeInsets.all(30.0), // 按钮内边距
            tooltip: "home", // 长按显示提示文本
          ),

          // 文本按钮
          TextButton(onPressed: () {
   }, child: Text("文本按钮"),)
        ],
      ),
    );
  }
}

登录页面

// ignore_for_file: file_names, unused_import, prefer_const_constructors, prefer_const_literals_to_create_immutables

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:fluttertoast/fluttertoast.dart';

class LoginDemo extends StatefulWidget {
   
  const LoginDemo({
   Key? key}) : super(key: key);

  @override
  _LoginDemoState createState() => _LoginDemoState();
}

class _LoginDemoState extends State<LoginDemo> {
   
  @override
  Widget build(BuildContext context) {
   
    return Scaffold(
      appBar: AppBar(
        title: Text("登录页面"),
        leading: Icon(Icons.menu),
      ),
      body: LoginPage(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
   },
        child: Text("确定"),
      ),
    );
  }
}

class LoginPage extends State