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

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

我有一种形式,可以添加卡片,每个卡片有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长度的一半。

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


依赖报错 idea导入项目后依赖报错,解决方案:https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错:更换其他版本 无法下载依赖可参考:https://blog.csdn.net/weixin_42628809/a
错误1:代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
错误1:gradle项目控制台输出为乱码 # 解决方案:https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
错误还原:在查询的过程中,传入的workType为0时,该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
报错如下,gcc版本太低 ^ server.c:5346:31: 错误:‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
解决方案1 1、改项目中.idea/workspace.xml配置文件,增加dynamic.classpath参数 2、搜索PropertiesComponent,添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
删除根组件app.vue中的默认代码后报错:Module Error (from ./node_modules/eslint-loader/index.js): 解决方案:关闭ESlint代码检测,在项目根目录创建vue.config.js,在文件中添加 module.exports = { lin
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
错误1:Request method ‘DELETE‘ not supported 错误还原:controller层有一个接口,访问该接口时报错:Request method ‘DELETE‘ not supported 错误原因:没有接收到前端传入的参数,修改为如下 参考 错误2:cannot r
错误1:启动docker镜像时报错:Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法:重启docker -&gt; systemctl r
错误1:private field ‘xxx‘ is never assigned 按Altʾnter快捷键,选择第2项 参考:https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2:启动时报错,不能找到主启动类 #
报错如下,通过源不能下载,最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
错误1:maven打包报错 错误还原:使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
错误1:服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
错误1:运行项目后报如下错误 解决方案 报错2:Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案:在pom.
参考 错误原因 过滤器或拦截器在生效时,redisTemplate还没有注入 解决方案:在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-