【问题标题】: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
                      ),
                    );
                  })));
         }
       }
      

      【讨论】:

        猜你喜欢
        • 2019-01-05
        • 2022-11-12
        • 1970-01-01
        • 1970-01-01
        • 2021-01-14
        • 2020-07-29
        • 1970-01-01
        • 2019-11-29
        • 2020-05-24
        相关资源
        最近更新 更多