update

lib/main.dart

@@ -1,4 +1,8 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:smartledz_wifi_test/models/wifi_model.dart';
+import 'package:smartledz_wifi_test/widgets/button_for_block.dart';
+import 'package:smartledz_wifi_test/widgets/wifi_item.dart';
 
 void main() {
   runApp(const MyApp());
@@ -7,109 +11,106 @@ void main() {
 class MyApp extends StatelessWidget {
   const MyApp({super.key});
 
-  // This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
-    return MaterialApp(
-      title: 'Flutter Demo',
-      theme: ThemeData(
-        // This is the theme of your application.
-        //
-        // Try running your application with "flutter run". You'll see the
-        // application has a blue toolbar. Then, without quitting the app, try
-        // changing the primarySwatch below to Colors.green and then invoke
-        // "hot reload" (press "r" in the console where you ran "flutter run",
-        // or simply save your changes to "hot reload" in a Flutter IDE).
-        // Notice that the counter didn't reset back to zero; the application
-        // is not restarted.
-        primarySwatch: Colors.blue,
+    return ScreenUtilInit(
+      builder: (BuildContext context, Widget? child) {
+        return MaterialApp(
+          title: 'SmartLEDZ WiFi Test',
+          theme: ThemeData(
+            primarySwatch: Colors.blue,
+          ),
+          home: Scaffold(
+            body: child!,
+          ),
+        );
+      },
+      child: const SafeArea(
+        left: false,
+        right: false,
+        bottom: false,
+        child: WifiList(),
       ),
-      home: const MyHomePage(title: 'Flutter Demo Home Page'),
     );
   }
 }
 
-class MyHomePage extends StatefulWidget {
-  const MyHomePage({super.key, required this.title});
-
-  // This widget is the home page of your application. It is stateful, meaning
-  // that it has a State object (defined below) that contains fields that affect
-  // how it looks.
-
-  // This class is the configuration for the state. It holds the values (in this
-  // case the title) provided by the parent (in this case the App widget) and
-  // used by the build method of the State. Fields in a Widget subclass are
-  // always marked "final".
-
-  final String title;
+class WifiList extends StatefulWidget {
+  const WifiList({Key? key}) : super(key: key);
 
   @override
-  State<MyHomePage> createState() => _MyHomePageState();
+  State<WifiList> createState() => _WifiListState();
 }
 
-class _MyHomePageState extends State<MyHomePage> {
-  int _counter = 0;
+class _WifiListState extends State<WifiList> {
+  final List<WifiModel> _wifiList = [
+    WifiModel(ssid: "zhonghui-5G", bssid: "1", rssi: 10),
+    WifiModel(ssid: "zhonghui_02", bssid: "2", rssi: 13),
+    WifiModel(ssid: "endo-lighting", bssid: "3", rssi: 50),
+    WifiModel(ssid: "endo-lighting", bssid: "4", rssi: 50),
+    WifiModel(ssid: "endo-lighting", bssid: "5", rssi: 50),
+    WifiModel(ssid: "endo-lighting", bssid: "6", rssi: 50),
+    WifiModel(ssid: "endo-lighting", bssid: "7", rssi: 50),
+    WifiModel(ssid: "endo-lighting", bssid: "8", rssi: 50),
+    WifiModel(ssid: "endo-lighting", bssid: "9", rssi: 50, result: "测试通过"),
+    WifiModel(ssid: "endo-lighting", bssid: "10", rssi: 50),
+    WifiModel(ssid: "endo-lighting", bssid: "11", rssi: 50, result: "正在测试"),
+    WifiModel(ssid: "endo-lighting", bssid: "12", rssi: 50, result: "正在测试"),
+    WifiModel(ssid: "endo-lighting", bssid: "13", rssi: 50, result: "未通过"),
+    WifiModel(ssid: "endo-lighting", bssid: "14", rssi: 50),
+    WifiModel(ssid: "endo-lighting", bssid: "15", rssi: 50),
+    WifiModel(ssid: "endo-lighting", bssid: "16", rssi: 50),
+    WifiModel(ssid: "endo-lighting", bssid: "17", rssi: 50),
+    WifiModel(ssid: "endo-lighting", bssid: "18", rssi: 50),
+  ];
 
-  void _incrementCounter() {
-    setState(() {
-      // This call to setState tells the Flutter framework that something has
-      // changed in this State, which causes it to rerun the build method below
-      // so that the display can reflect the updated values. If we changed
-      // _counter without calling setState(), then the build method would not be
-      // called again, and so nothing would appear to happen.
-      _counter++;
-    });
-  }
+  final List<String> _selectWifiList = []; // 已选择的wifi的bssid标识列表
 
   @override
   Widget build(BuildContext context) {
-    // This method is rerun every time setState is called, for instance as done
-    // by the _incrementCounter method above.
-    //
-    // The Flutter framework has been optimized to make rerunning build methods
-    // fast, so that you can just rebuild anything that needs updating rather
-    // than having to individually change instances of widgets.
-    return Scaffold(
-      appBar: AppBar(
-        // Here we take the value from the MyHomePage object that was created by
-        // the App.build method, and use it to set our appbar title.
-        title: Text(widget.title),
-      ),
-      body: Center(
-        // Center is a layout widget. It takes a single child and positions it
-        // in the middle of the parent.
-        child: Column(
-          // Column is also a layout widget. It takes a list of children and
-          // arranges them vertically. By default, it sizes itself to fit its
-          // children horizontally, and tries to be as tall as its parent.
-          //
-          // Invoke "debug painting" (press "p" in the console, choose the
-          // "Toggle Debug Paint" action from the Flutter Inspector in Android
-          // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
-          // to see the wireframe for each widget.
-          //
-          // Column has various properties to control how it sizes itself and
-          // how it positions its children. Here we use mainAxisAlignment to
-          // center the children vertically; the main axis here is the vertical
-          // axis because Columns are vertical (the cross axis would be
-          // horizontal).
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: <Widget>[
-            const Text(
-              'You have pushed the button this many times:',
-            ),
-            Text(
-              '$_counter',
-              style: Theme.of(context).textTheme.headlineMedium,
-            ),
-          ],
+    return Column(
+      children: [
+        Expanded(
+          child: ListView(
+            children: List.generate(_wifiList.length, (index){
+              WifiModel wifi = _wifiList[index];
+              return WifiItem(
+                wifiModel: wifi, // wifi模型
+                active: _selectWifiList.contains(wifi.bssid), // 是否选中状态
+                onTap: (WifiModel wifiModel){ // 列表点击事件
+                  setState(() {
+                    if(_selectWifiList.contains(wifi.bssid)){ // 已选中，则取消选中
+                      _selectWifiList.remove(wifi.bssid);
+                    }else{
+                      _selectWifiList.add(wifi.bssid);
+                    }
+                  });
+                },
+              );
+            }),
+          ),
         ),
-      ),
-      floatingActionButton: FloatingActionButton(
-        onPressed: _incrementCounter,
-        tooltip: 'Increment',
-        child: const Icon(Icons.add),
-      ), // This trailing comma makes auto-formatting nicer for build methods.
+        ButtonForBlock(
+          title: "开始测试",
+          radius: 0,
+          width: MediaQuery.of(context).size.width,
+          height: 50.sp,
+          onTap: (){
+            if(_selectWifiList.isNotEmpty){
+              // 有选中的wifi，则只处理选中的wifi
+
+              // TODO 此处完善处理逻辑
+              // 选中的wifi bssid列表 _selectWifiList
+
+              return;
+            }
+
+            // 处理全部wifi
+            // TODO 此处完善处理逻辑
+
+          },
+        )
+      ],
     );
   }
 }

lib/models/wifi_model.dart

@@ -0,0 +1,16 @@
+// wifi模型
+class WifiModel{
+  String ssid; // wifi网络名称
+  String bssid; // wifi唯一标识，多个wifi名称相同的情况下需要使用bssid来区分
+  int rssi; // wifi信号
+  String result; // 测试结果
+
+  WifiModel({
+    required this.ssid,
+    required this.bssid,
+    required this.rssi,
+    this.result = "未测试",
+  });
+
+  Map toJson() => {"ssid": ssid, "bssid": bssid, "rssi": rssi, "result": result};
+}

lib/widgets/button_for_block.dart

@@ -0,0 +1,53 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+
+class ButtonForBlock extends StatefulWidget {
+  final String title;
+  final double? width;
+  final double? height;
+  final void Function()? onTap;
+  final double? fontSize;
+  final Color? bgColor;
+  final BoxBorder? border;
+  final double? radius;
+
+  const ButtonForBlock({
+    Key? key,
+    required this.title,
+    this.onTap,
+    this.width,
+    this.height,
+    this.fontSize,
+    this.bgColor=const Color(0xFF00aaFF),
+    this.border,
+    this.radius,
+  }) : super(key: key);
+
+  @override
+  State<ButtonForBlock> createState() => _ButtonForBlockState();
+}
+
+class _ButtonForBlockState extends State<ButtonForBlock> {
+  late bool isOn = false;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: widget.onTap,
+      onTapDown: (e)=>{setState(()=>{isOn=true})},
+      onTapUp: (e)=>{setState(()=>{isOn=false})},
+      onTapCancel: ()=>{setState(()=>{isOn=false})},
+      child: Container(
+        height: widget.height ?? 35.h,
+        alignment: Alignment.center,
+        width: widget.width ?? 280.w,
+        decoration: BoxDecoration(
+          color: isOn? const Color(0xff007ab6): widget.bgColor,
+          borderRadius: BorderRadius.circular(widget.radius ?? (widget.height != null? widget.height!/2: 35.h/2)),
+          border: widget.border
+        ),
+        child: Text(widget.title, style: TextStyle(color: Colors.white, fontSize: widget.fontSize ?? 15.sp)),
+      ),
+    );
+  }
+}

lib/widgets/wifi_item.dart

@@ -0,0 +1,76 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:smartledz_wifi_test/models/wifi_model.dart';
+
+class WifiItem extends StatefulWidget {
+  final WifiModel wifiModel; // wifi模型
+  final bool active; // 是否选中
+  final Function(WifiModel wifiModel)? onTap; // 是否选中
+
+  const WifiItem({
+    super.key,
+    required this.wifiModel,
+    this.active = false,
+    this.onTap,
+  });
+
+  @override
+  State<WifiItem> createState() => _WifiItemState();
+}
+
+class _WifiItemState extends State<WifiItem> {
+
+  // 测试结果与颜色的对应关系
+  final Map<String, Color> resultAsColor = {
+    "未测试": Colors.grey,
+    "正在测试": Colors.blue,
+    "测试通过": Colors.green,
+    "未通过": Colors.red,
+  };
+
+  @override
+  Widget build(BuildContext context) {
+
+    Color resultColor = Colors.grey;
+    if(resultAsColor.containsKey(widget.wifiModel.result)){
+      resultColor = resultAsColor[widget.wifiModel.result]!;
+    }
+
+    return GestureDetector(
+      onTap: ()=>widget.onTap?.call(widget.wifiModel),
+      child: Container(
+        height: 40.sp,
+        decoration: BoxDecoration(
+          color: widget.active? Colors.pink.shade100: null,
+          border: Border(
+            bottom: BorderSide(color: Colors.grey, width: .5.sp)
+          )
+        ),
+        child: Row(
+          children: [
+            Expanded(
+              child: Container(
+                alignment: Alignment.centerLeft,
+                padding: EdgeInsets.symmetric(horizontal: 5.sp),
+                child: Text(widget.wifiModel.ssid, style: TextStyle(fontSize: 16.sp)),
+              ),
+            ),
+            Container(
+              alignment: Alignment.center,
+              width: 50.w,
+              decoration: BoxDecoration(
+                border: Border.symmetric(vertical: BorderSide(color: Colors.grey, width: .5.sp))
+              ),
+              child: Text(widget.wifiModel.rssi.toString(), style: TextStyle(fontSize: 14.sp, color: Colors.green)),
+            ),
+            Container(
+              alignment: Alignment.center,
+              width: 80.w,
+              child: Text(widget.wifiModel.result, style: TextStyle(fontSize: 14.sp, color: resultColor)),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

pubspec.lock

@@ -70,6 +70,14 @@ packages:
       url: "https://pub.flutter-io.cn"
     source: hosted
     version: "2.0.1"
+  flutter_screenutil:
+    dependency: "direct main"
+    description:
+      name: flutter_screenutil
+      sha256: "0a122936b450324cbdfd51be0819cc6fcebb093eb65585e9cd92263f7a1a8a39"
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "5.7.0"
   flutter_test:
     dependency: "direct dev"
     description: flutter

pubspec.yaml

@@ -35,6 +35,7 @@ dependencies:
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.
   cupertino_icons: ^1.0.2
+  flutter_screenutil: ^5.7.0
 
 dev_dependencies:
   flutter_test: