我如何 return 复选框值颤动

Question

我有这个应用程序，它使用复选框来接收用户的输入，例如 select 您想要的一种存储类型（NVMe、ssd、hdd 等）我想要一个解决方案，如果复选框或select 编辑了多个复选框，它在摘要中输出了它们的值 screen.I 已经尝试过 youtube 教程，但我不太了解它们。这是我的代码谢谢

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:signoff_app/Screens/preview.dart';
import 'package:signoff_app/storage/store.dart';
import 'package:signoff_app/widget/textformfields.dart';

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

 @override
 State<NewSign> createState() => _NewSignState();
 }

class _NewSignState extends State<NewSign> {
 bool ssd = false;

 bool hdd = false;

 bool nvme = false;

 bool m2 = false;

 TextEditingController pcname = new TextEditingController();

 TextEditingController motherboard = new TextEditingController();

 TextEditingController casing = new TextEditingController();

 TextEditingController ramSize = new TextEditingController();

 TextEditingController ram = new TextEditingController();

 @override
 Widget build(BuildContext context) {
return SafeArea(
  child: Scaffold(
    appBar: AppBar(
      backgroundColor: Colors.red,
      title: Text(
        'Sign Off a Computer',
        style: GoogleFonts.lato(
          fontSize: 16,
          fontStyle: FontStyle.normal,
        ),
      ),
    ),
    body: Container(
      width: MediaQuery.of(context).size.width,
      // color: Colors.black54,
      child: Stack(
        children: [
          Container(
            //margin: EdgeInsets.fromLTRB(24, 0, 0, 24),
            padding: EdgeInsets.fromLTRB(32, 64, 32, 32),
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            // color: Colors.black54,
            child: Column(
              children: [
                Expanded(
                  flex: 1,
                  child: SizedBox(
                    width: 100,
                    height: 100,
                    child: Image(
                      fit: BoxFit.contain,
                      image: AssetImage("./images/udlogo.png"),
                    ),
                  ),
                ),
                Expanded(
                  flex: 3,
                  child: Column(
                    children: [
                      Row(
                        children: [
                          Expanded(
                            flex: 2,
                            child: TextFormField(
                              controller: pcname,
                              validator: (val) {
                                if (val!.isEmpty) {
                                  return "required";
                                }
                              },
                              decoration: InputDecoration(
                                labelText: 'Pc Name',
                                //  errorText: 'please enter pc name'
                                focusedBorder: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(6),
                                  borderSide: BorderSide(
                                    color: Colors.blue,
                                  ),
                                ),

                                enabledBorder: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(6.0),
                                  borderSide: BorderSide(
                                    color: Colors.grey,
                                    width: 1.5,
                                  ),
                                ),

                                errorBorder: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(6.0),
                                  borderSide: BorderSide(
                                    color: Colors.red,
                                    width: 1.5,
                                  ),
                                ),
                              ),
                            ),
                          ),
                          SizedBox(
                            width: 24,
                          ),
                          Expanded(
                            flex: 2,
                            child: TextFormField(
                              controller: motherboard,
                              decoration: InputDecoration(
                                labelText: 'MotherBoard',
                                //  errorText: 'please enter pc name'
                                focusedBorder: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(6),
                                  borderSide: BorderSide(
                                    color: Colors.blue,
                                  ),
                                ),

                                enabledBorder: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(6.0),
                                  borderSide: BorderSide(
                                    color: Colors.grey,
                                    width: 1.5,
                                  ),
                                ),

                                errorBorder: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(6.0),
                                  borderSide: BorderSide(
                                    color: Colors.red,
                                    width: 1.5,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                      SizedBox(
                        height: 62,
                      ),
                      Row(
                        children: [
                          Expanded(
                            flex: 2,
                            child: TextFormField(
                              controller: ram,
                              validator: (val) {
                                if (val!.isEmpty) {
                                  return "required";
                                }
                              },
                              decoration: InputDecoration(
                                labelText: 'Ram',
                                //  errorText: 'please enter pc name'
                                focusedBorder: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(6),
                                  borderSide: BorderSide(
                                    color: Colors.blue,
                                  ),
                                ),

                                enabledBorder: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(6.0),
                                  borderSide: BorderSide(
                                    color: Colors.grey,
                                    width: 1.5,
                                  ),
                                ),

                                errorBorder: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(6.0),
                                  borderSide: BorderSide(
                                    color: Colors.red,
                                    width: 1.5,
                                  ),
                                ),
                              ),
                            ),
                          ),
                          SizedBox(
                            width: 24,
                          ),
                          Expanded(
                            flex: 2,
                            child: TextFormField(
                              controller: casing,
                              decoration: InputDecoration(
                                labelText: 'Casing',
                                //  errorText: 'please enter pc name'
                                focusedBorder: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(6),
                                  borderSide: BorderSide(
                                    color: Colors.blue,
                                  ),
                                ),

                                enabledBorder: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(6.0),
                                  borderSide: BorderSide(
                                    color: Colors.grey,
                                    width: 1.5,
                                  ),
                                ),

                                errorBorder: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(6.0),
                                  borderSide: BorderSide(
                                    color: Colors.red,
                                    width: 1.5,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                      SizedBox(height: 24),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text(
                            'Storage',
                            style: TextStyle(
                              fontSize: 16,
                              fontWeight: FontWeight.w900,
                            ),
                          ),
                          SizedBox(height: 8),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                              //ssd checkbox

                              Text("SSD"),
                              SizedBox(width: 2),
                              Checkbox(
                                value: ssd,
                                onChanged: (bool? value) {
                                  setState(() {
                                    ssd = value!;
                                  });
                                },
                              ),

                              //hdd checkbox

                              SizedBox(width: 16),
                              Text("HDD"),
                              SizedBox(width: 2),
                              Checkbox(
                                value: hdd,
                                onChanged: (bool? value) {
                                  setState(() {
                                    hdd = value!;
                                  });
                                },
                              ),
                              SizedBox(width: 16),

                              //Nvme checkbox

                              Text("NVMe"),
                              SizedBox(width: 2),
                              Checkbox(
                                value: nvme,
                                onChanged: (bool? value) {
                                  setState(() {
                                    ssd = value!;
                                  });
                                },
                              ),

                              //m.2 checkbox

                              SizedBox(width: 16),
                              Text("M.2"),
                              SizedBox(width: 2),
                              Checkbox(
                                value: m2,
                                onChanged: (bool? value) {
                                  setState(() {
                                    m2 = value!;
                                  });
                                },
                              ),
                            ],
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Align(
                    alignment: Alignment.bottomCenter,
                    child: SizedBox(
                      width: MediaQuery.of(context).size.width,
                      height: 45,
                      child: ElevatedButton(
                        style:
                            ElevatedButton.styleFrom(primary: Colors.red),
                        onPressed: () {
                          Navigator.of(context).push(
                            MaterialPageRoute(
                              builder: (context) => PreviewSel(pcname.text,
                                  motherboard.text, ram.text, casing.text),
                            ),
                          );
                        },
                        child: Text('Submit'),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    ),
  ),
);
 }
}

Answer 1

在我看来，您现在已经具备了创建 Text 组件的一切条件。您使用 setState 更新布尔值，点击复选框将更新状态值，允许您在 Widget 中使用这些变量，Widget 将在其中一个值更改时更新。

final String _summary = 'ssd: $ssd, hdd: $hdd, nvme: $nvme m2: $m2';
print(_summary); // 'ssd: false, hdd: false, nvme: false, m2: false';

...

Text(_summary);