Flutter中的StatelessWidget中复选框无法正常工作

Question

这是我的类

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){

                    },
                  ),

我无法勾选复选框。当我使用单选按钮时也发现了相同的问题。

- Ashique bzq

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
          });
        },
      ),
    );
  }
}

- Benjamin

---

为什么我可以在没有StatefulWidget的情况下更改TextField的值？ - Iswanto San

Answer 2

您可以使用provider软件包来实现这一点。我尝试创建了一个尽可能简短的应用程序，以展示您如何使用它。好处在于，您可以保持widget的无状态。

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团队的视频，介绍如何使用Provider。我仍然建议花些时间进一步研究它。

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

- Eddy Todd

Answer 3

把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
                ),
              );
            })));
   }
 }

- Golden Lion

Answer 4

你可以使用 Riverpod 包中的 StateProvider 来实现这个功能。

final checkboxProvider = StateProvider<bool>((ref) => false);



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

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Consumer(
            builder: (context, ref, _) {
              return Checkbox(
                value: ref.watch(checkboxProvider),
                onChanged: (value) {
                  ref.read(checkboxProvider.state).state = value!;
                },
              );
            }
        ),
        Text('On'),
      ],
    );
  }
}

- Polymath