Flutter 一卡通二维码展示 App 代码结构优化

本示例将展示如何将一个 Flutter 一卡通二维码展示 App 代码进行结构优化，将其划分为 data、ui、service、model 四个目录，并给出每个目录下的文件名和代码示例。

data 目录

该目录用于存放应用程序的数据相关类和方法。

global.dart

import 'package:shared_preferences/shared_preferences.dart';

class Global {
  static String password = '';
  static String qrcode = '无';
  static Color home_currentcolor = Colors.blue;
  static SharedPreferences prefs;

  // 初始化
  static Future init() async {
    prefs = await SharedPreferences.getInstance();
    // 读取本地存储的账号密码
    password = prefs.getString('password') ?? '';
  }

  // 保存账号密码
  static void saveaccount() {
    prefs.setString('password', password);
  }

  // 获取二维码
  Future getqr() async {
    // 使用dio请求数据
    Dio dio = new Dio();
    Response response = await dio.get(
        'http://jwkq.xupt.edu.cn:8080/User/GetUserImage?code=' + password);
    String data = response.data;
    // 判断是否请求成功
    if (data.contains('http://jwkq.xupt.edu.cn:8080/')) {
      qrcode = data;
    } else {
      qrcode = '获取失败';
    }
  }

  // 获取二维码链接
  static String qrcodegetter() {
    return qrcode;
  }
}

ui 目录

该目录用于存放应用程序的用户界面相关类和方法。

qr_code.dart

import 'package:flutter/material.dart';
import 'package:pretty_qr_code/pretty_qr_code.dart';
import 'package:slide_countdown/slide_countdown.dart';

import '../global.dart';

class QRCode extends StatefulWidget {
  @override
  _QRCodeState createState() => _QRCodeState();
}

class _QRCodeState extends State<QRCode> {
  final streamDuration = StreamDuration(Duration(seconds: 50));

  void initState() {
    super.initState();
    Global().getqr();
  }

  String passtemp = '';
  void refresh() {
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Global.home_currentcolor,
          // 设置
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.settings),
              onPressed: () {
                // 弹窗一个文本框加上一个确认框
                showDialog(
                    context: context,
                    builder: (context) {
                      return AlertDialog(
                        title: Text('修改你的一卡通密码\n如果没有错误请不要修改'),
                        content: TextField(
                          onChanged: (value) {
                            passtemp = value;
                          },
                        ),
                        actions: <Widget>[
                          TextButton(
                            child: Text('确认'),
                            onPressed: () {
                              Global.password = passtemp;
                              Global.saveaccount();
                              Navigator.of(context).pop();
                            },
                          )
                        ],
                      );
                    });
              },
            ),
          ],
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('点击二维码可手动刷新\n当前是' + Global.qrcode),
            Align(
              alignment: Alignment.topCenter,
              child: SlideCountdown(
                decoration: BoxDecoration(
                    color: Global.home_currentcolor,
                    borderRadius: BorderRadius.circular(10)),
                durationTitle: DurationTitle(
                    days: '天', hours: '时', minutes: '分', seconds: '秒'),
                // This duration no effect if you customize stream duration
                streamDuration: streamDuration,
                onChanged: (Duration remaining) {
                  print('剩余' + remaining.inSeconds.toString()); // 这里可以获取到剩余时间
                  // 如果剩余时间等于1,恢复倒计时为50s
                  if (remaining.inSeconds <= 1) {
                    streamDuration.change(Duration(seconds: 51));
                    Global().getqr().then((value) {
                      setState(() {});
                    });
                  }
                },
              ),
            ),
            Expanded(
              child: GestureDetector(
                onTap: () {
                  print('被点击了');
                  Global().getqr().then((value) {
                    streamDuration.change(Duration(seconds: 51));
                    setState(() {});
                  });
                },
                child: PrettyQr(
                  typeNumber: 3,
                  size: 200,
                  data: Global.qrcodegetter(),
                  errorCorrectLevel: QrErrorCorrectLevel.M,
                  roundEdges: true,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

service 目录

该目录用于存放应用程序的业务逻辑相关类和方法。

qr_code_service.dart

import 'package:dio/dio.dart';

import '../global.dart';

class QRCodeService {
  // 获取二维码
  Future getQRCode() async {
    // 使用dio请求数据
    Dio dio = new Dio();
    Response response = await dio.get(
        'http://jwkq.xupt.edu.cn:8080/User/GetUserImage?code=' + Global.password);
    String data = response.data;
    // 判断是否请求成功
    if (data.contains('http://jwkq.xupt.edu.cn:8080/')) {
      Global.qrcode = data;
    } else {
      Global.qrcode = '获取失败';
    }
  }
}

model 目录

该目录用于存放应用程序的数据模型相关类和方法。

user.dart

class User {
  String password;
  String qrcode;

  User({this.password, this.qrcode});

  User.fromJson(Map<String, dynamic> json) {
    password = json['password'];
    qrcode = json['qrcode'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['password'] = this.password;
    data['qrcode'] = this.qrcode;
    return data;
  }
}

总结

通过将代码划分为不同的目录，可以使代码结构更加清晰，易于维护和扩展。这种结构化的代码组织方式也更容易被搜索引擎收录。

注意：

本示例仅供参考，实际项目中可能需要根据具体情况进行调整。
代码中的http://jwkq.xupt.edu.cn:8080/User/GetUserImage?code=为示例地址，请替换为您的实际地址。
Dio 库用于发送网络请求，请确保已在项目中引入。
shared_preferences 库用于本地数据存储，请确保已在项目中引入。
pretty_qr_code 库用于生成二维码，请确保已在项目中引入。
slide_countdown 库用于实现倒计时，请确保已在项目中引入。