颤振复选框在无状态小部件中不起作用答案

【问题标题】：flutter checkbox not working in StatelessWidget颤振复选框在无状态小部件中不起作用
【发布时间】：2019-12-21 17:08:04
【问题描述】：

这是我的课

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 时也发现了同样的问题。

【问题讨论】：

标签： android flutter dart flutter-layout hybrid-mobile-app

【解决方案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
          });
        },
      ),
    );
  }
}

【讨论】：

但是为什么我可以在没有 StatefulWidget 的情况下更改 TextField 值？

【解决方案2】：

实现此目的的一种方法是使用provider 包。我尝试创建最短的应用程序来展示如何使用它。整洁的部分是您可以保持您的小部件无状态。

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 文件。

【讨论】：

【解决方案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
                ),
              );
            })));
   }
 }

【讨论】：