在Flutter

时间:2019-05-07 13:05:26

标签: checkbox flutter toggle

因此,我有一个ImageTexts()小部件,其中包含图像和文本。由api响应填充。我还有另一个小部件InterestPicker小部件,它使用ImageText作为参数。

因为我想通过ImageText()中存在的复选框来切换InterestPicker小部件中图像的边框颜色。但是经过所有的辛苦工作,我没有得到结果。

到目前为止,我要做的是:我已全局声明一个变量isAllSelected = false,并在Checkbox字段内的onChange()中设置了它的状态

失败:边框颜色完全没有改变。

1。 CLASS

bool isAllSelected = false;
class SelectInterestPage extends StatefulWidget {
  @override
  _SelectInterestPageState createState() => _SelectInterestPageState();
}

class _SelectInterestPageState extends State<SelectInterestPage> {
  List<abc> abs = [];
  @override
  void initState() {
   // TODO: implement initState
   super.initState();
   this.run();
  }

  void run(){
    //calling api
  }

  Widget get getDrinks{
    return GridView.count(
      shrinkWrap: true,
      crossAxisCount: 3,
      mainAxisSpacing: 8,
      children: this.abc.map((o){
       return ImageTexts(userInterest: o);
      }).toList()
    );
  }

  @override
  Widget build(BuildContext context) {
     return Scaffold(
        body: Builder(
          builder: (BuildContext context){
            return Stack(
               Positioned(
                left: 24, right: 24, top: 0, bottom: 78.0, 
                child: InterestPicker(
                  containerWidget: this.getDrinks
                )
               )
            );
          }
        )
     );
  }
}

2。 ImageTexts()小部件仅关注主要内容。没有完整的课程描述

GestureDetector(
   onTap: () {onTapEvent();},
   child: Container(
     height: 88.7,
     width: 88.7,
     decoration: BoxDecoration(
        image: DecorationImage(
        image: NetworkImage(widget.userInterest.interest.image),
               fit: BoxFit.fill
        ),
        shape: BoxShape.circle,
        border: Border.all(color: isAllSelected ? Theme.of(context).primaryColor : Colors.transparent, width: 2.0)
     )
)

3。 InterestPicker()小部件

class InterestPicker extends StatefulWidget {
  final Widget containerWidget;

  InterestPicker({this.containerWidget});

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

class _InterestPickerState extends State<InterestPicker> {
   @override
   Widget build(BuildContext context) {
      return Column(
         children: [
           Container(
             height: MediaQuery.of(context).size.height/2,
             child: widget.containerWidget
           ),
           Transform.scale(
              scale: 1.2,
              child: new Checkbox(
              value: isAllSelected,
              activeColor: Theme.of(context).primaryColor,
              onChanged: (bool value) {
                 setState(() {
                    isAllSelected = value;
                 });
              }
             )
           )
         ] 
      );
   }
}

注意::所有课程仅属于同一课程。我已检查复选框是否更改了isAllSelected的值。

  • 当我在全球范围内弃用isAllSelected = true并重新启动该应用程序时,这是唯一可行的时间。

我已经尽我最大的努力来达到我想要的水平,但是根据isAllSeletced的值,颜色根本没有变为我想要的颜色。任何帮助,将不胜感激。

我还尝试在ImageTexts()小部件字段中做一件事:

bool isSelected = false;
@override
Widget build(BuildContext context){
   if(isAllSelected == true){
      setState((){
        this.isSelected = true;
      });
   }

   border: Border.all(color: isSelected ? Theme.of(context).primaryColor : Colors.transparent, width: 2.0)
}

0 个答案:

没有答案