Flutter 复选框在 StatelessWidget 中不起作用

Question

这是我的class

class Home extends StatelessWidget {

复选框位于此处。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: EdgeInsets.all(20.0),
              child: Column(
                children: <Widget>[
                  TextField(
                      controller: ctrlMotherName,
                      decoration: InputDecoration(
                          labelText: "Name of Mother",
                          border: OutlineInputBorder()
                      )
                  ),
                  SizedBox(height: 10,),
                  Checkbox(
                    value: false,
                    onChanged: (bool val){

                    },
                  ),

我无法选中复选框。我在使用 Radiobutton 时也发现了同样的问题。

Answer 1

您需要使用 StatefulWidget，因为您要处理不断变化的值。我提供了一个例子：

class MyAppOne extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyAppOne> {
  bool _myBoolean = false;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Checkbox(
        value: _myBoolean,
        onChanged: (value) {
          setState(() {
            _myBoolean = value; // rebuilds with new value
          });
        },
      ),
    );
  }
}

Answer 2

将 flutter 想成 javascript 并将位置作为参数传递给列表构建器中的 medCheckedChanged 函数。当 dart 解析器对表达式或 lambda 函数求值时，它将以位置参数作为值调用该方法。

class testWidget2 extends StatefulWidget {
    testWidget2({Key key}) : super(key: key);
    int numberLines = 50;
    List<bool> checkBoxValues = [];

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

 class _testWidget2State extends State<testWidget2> {
   _medCheckedChanged(bool value, int position) {
      setState(() => widget.checkBoxValues[position] = value);
  }

  @override
  void initState() {
  // TODO: implement initState
   super.initState();
  int i = 0;
   setState(() {
    while (i < widget.numberLines) {
    widget.checkBoxValues.add(false);
    i++;
   }
   });
  }

 @override
 Widget build(BuildContext context) {
  return Scaffold(
    body: Container(
        child: ListView.builder(
            itemCount: widget.checkBoxValues.length,
            itemBuilder: (context, position) {
              return Container(
                height: MediaQuery.of(context).size.width * .06,
                width: MediaQuery.of(context).size.height * .14,
                alignment: Alignment(0, 0),
                child: Checkbox(
                  activeColor: Color(0xff06bbfb),
                  value: widget.checkBoxValues[position],
                  onChanged: (newValue) {
                    _medCheckedChanged(newValue, position);
                  }, //pass to medCheckedChanged() the position
                ),
              );
            })));
   }
 }

Answer 3

实现此目的的一种方法是使用 provider 包。我试图创建最短的应用程序来展示如何使用它。整洁的部分是你可以让你的小部件 stateless.

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const Home(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ChangeNotifierProvider(
          create: (_) => CheckboxProvider(),
          child: Consumer<CheckboxProvider>(
            builder: (context, checkboxProvider, _) => Checkbox(
              value: checkboxProvider.isChecked,
              onChanged: (value) {
                checkboxProvider.isChecked = value ?? true;
              },
            ),
          ),
        ),
      ),
    );
  }
}

class CheckboxProvider with ChangeNotifier {
  bool _isChecked = false;

  bool get isChecked => _isChecked;

  set isChecked(bool value) {
    _isChecked = value;
    notifyListeners();
  }
}

我花了很长时间才理解这个包，但如果你想要一种更简单的方法来管理你的应用程序中的状态，它是非常有用和推荐的。这是来自 Flutter 团队的 video 解释如何使用 Provider。我仍然建议花一些时间进一步研究它。

P.S.: 不要忘记更改 pubspec.yaml 文件。

Flutter 复选框在 StatelessWidget 中不起作用

flutter checkbox not working in StatelessWidget

android

dart

hybrid-mobile-app

flutter

flutter-layout