颤振:从动态形式获取开关切换值,或者为什么状态更改重建不同

问题描述

我有一种形式,可以添加卡片,每个卡片有5个文本字段和2个开关。我想使用一种方法来构建开关代码(以及文本字段代码,但这是可行的)。但是,开关拒绝显示其预期状态。我看到了几个类似的问题。但是,大多数解决方案是通过一个列表视图来解决的,该列表视图将所有切换/复选框紧挨着列出(我有多个卡,每个卡具有多个文本字段和多个开关)。 This接近了,但我不太了解答案(在评论内)

实际上,一些答案来自将开关状态存储在布尔列表中的相同(我猜是差不多,因为我不起作用)。调试时,我可以看到这些值已正确存储在列表中。但是,更改后的值不会在状态更改时呈现。

import 'package:Flutter/cupertino.dart';
import 'package:Flutter/material.dart';

class MainPage extends StatefulWidget {
  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  var descrTECs = <TextEditingController>[];
  var fixedSCs = [true]; //storing the switch values
  var cards = <Card>[]; // storing the list of cards with forms

  SizedBox createTextField(String placeholderStr,double fieldWidth) {
    var tFieldController = TextEditingController();
    switch (placeholderStr) { //switching placeholder to assign text controller to correct controller list
      case "Description":
        descrTECs.add(tFieldController);
        break;
    }
    return SizedBox(width: fieldWidth,height: 25,child: CupertinoTextField(
          placeholder: placeholderStr,controller: tFieldController,),);
  }

  SizedBox createSwitch(int pos) {
    return SizedBox(width: 50,child: CupertinoSwitch(
          value: fixedSCs[pos],onChanged: (value) {
            setState(() => fixedSCs[pos] = value); // value is stored in fixedSCs but not rendered upon rebuild
          },)
    );
  }

  Card createCard() {
    return Card(
      child: Row(children: <Widget>[
        Text('#p${cards.length + 1}:'),Column(
          children: <Widget>[
            createSwitch(cards.length),createTextField("Description",70.0),],);
  }

  @override
  void initState() {
    super.initState();
    cards.add(createCard()); // first card created upon start
  }

  @override
  Widget build(BuildContext context) {
    return CupertinopageScaffold(
      child: SafeArea(
        child: Column(
          children: <Widget>[
            Expanded(
              child: ListView.builder( // List Builder to show all cards
                itemCount: cards.length,itemBuilder: (BuildContext context,int index) {
                  return cards[index];
                },RaisedButton(
                child: Text('add new'),onpressed: () => setState(() {
                  fixedSCs.add(true); // bool element created to create next card
                  cards.add(createCard());}  // create next card
                ),);
  }
}

我通常不了解的一件事:cards.length}状态更改后的重建应该是我的卡片数量,比方说3。当它呈现第一张卡片时,它会通过行{{1} },因此它应该显示#p3而不是#p1。我在这里怎么了?

解决方法

与此同时,我进行了一些逻辑更改。

我将开关构建器放入了无状态小部件

class createSwitch extends StatelessWidget {
  const createSwitch({
    this.label,this.margin=const EdgeInsets.all(0.0),this.width,this.height,this.value,this.onChanged});
  final String label; final EdgeInsets margin; final double width; final double height; final bool value;
  final Function onChanged;

  @override
  Widget build(BuildContext context) {
    return Container(
        child: Row(
          children: <Widget>[
            Expanded(child: Text(label)),CupertinoSwitch(
                value: value,onChanged: (bool newValue) {onChanged(newValue);},),],}  }

在父级有状态控制器中,我创建了一个列表来存储交换机的状态var parameterSCs = [true];,每次添加卡时,我都会通过单击按钮 onPressed: () => setState(() {parameterSCs.add(true);}

添加一个值。

我不再将卡片小部件存储为列表。相反,我直接在ListView.builder的代码中构建它们

ListView.builder(
                itemCount: parameterSCs.length,itemBuilder: (BuildContext context,int index) {
                  return Card( ...

在我的真实代码中,每张卡有2个开关,因此我总是添加2个元素,并且ListView的计数是parameterSC长度的一半。

我尝试了很多方法,这是唯一可行的方法