如何在操作中删除特定的 Row 小部件答案

【问题标题】：How to remove specific Row widget on action如何在操作中删除特定的 Row 小部件
【发布时间】：2021-11-01 11:19:29
【问题描述】：

如何在 Flutter 网页中删除屏幕中的特定行？我在 StatefulWidget“EditForm2”中有 2 行。两行都有 Text、TextFormField 以及用于删除整行的 Button。什么是实现这一目标的好方法？我假设我必须使用 setstate() 方法和 removeAt() 行表，但我不知道如何使用它。我想制作动态表单，用户可以在其中删除和添加输入控件。

import 'package:flutter/material.dart';

class EditForm2 extends StatefulWidget {
  @override
  _EditForm2State createState() => _EditForm2State();
}

class _EditForm2State extends State<EditForm2> {
  var Rows = <Row>[];

  Row RowFsLink;
  Row RowGeoInfo;
  @override
  Widget build(BuildContext context) {
    ///first Row
    RowFsLink = new Row(children: [
      Expanded(
        flex: 3,
        child: Container(
          margin: const EdgeInsets.only(left: 30.0, right: 30.0),
          child: Text('Link',
              style: TextStyle(
                color: Colors.black54,
                fontSize: 20.0,
                letterSpacing: 0,
                fontWeight: FontWeight.normal,
              )),
        ),
      ),
      Expanded(
          flex: 6,
          child: Container(
              margin: const EdgeInsets.only(right: 30.0),
              child: TextFormField(initialValue: 'test link'))),
      Container(
        margin: const EdgeInsets.only(right: 30.0),
        child: Ink(
          decoration: ShapeDecoration(
            color: Colors.red,
            shape: CircleBorder(),
          ),
          child: IconButton(
            icon: Icon(
              Icons.remove,
              color: Colors.white,
            ),
            onPressed: () {},
          ),
        ),
      ),
    ]);

    Rows.add(RowFsLink);

    ///second Row
    RowGeoInfo = new Row(children: [
      Expanded(
        flex: 3,
        child: Container(
          margin: const EdgeInsets.only(left: 30.0, right: 30.0, bottom: 50),
          child: Text('Geo',
              style: TextStyle(
                color: Colors.black54,
                fontSize: 20.0,
                letterSpacing: 0,
                fontWeight: FontWeight.normal,
              )),
        ),
      ),
      Expanded(
          flex: 6,
          child: Container(
              margin: const EdgeInsets.only(right: 30.0, bottom: 50),
              child: TextFormField(initialValue: '0.50;0.44'))),
      Container(
        margin: const EdgeInsets.only(right: 30.0),
        child: Ink(
          decoration: ShapeDecoration(
            color: Colors.red,
            shape: CircleBorder(),
          ),
          child: IconButton(
            icon: Icon(
              Icons.remove,
              color: Colors.white,
            ),
            onPressed: () {},
          ),
        ),
      ),
    ]);

    Rows.add(RowGeoInfo);

    return Column(children: this.Rows);
  }
}

【问题讨论】：

标签： flutter dart setstate

【解决方案1】：

在调用Rows.add方法之前检查状态变量isVisible：

var _isVisible = true;
...
onPressed: () {
  setState(() {
    _isVisible = false;
  });
},
...

build 方法内部：

if (_isVisible) {
  Rows.add(RowGeoInfo);
}

这将在每次刷新时动态添加/删除行。每次调用setState 时页面都会刷新。

【讨论】：

谢谢，它有效，但如果我是正确的，我还必须在 setstate 方法中清除行数组？：var Rows = [];因为现在当我删除第一行时，页面只刷新了第二行，但又添加了两行（第一行和第二行），所以有 3 行。
清除行，不需要重新初始化变量Rows。（顺便说一句，不要用大写命名变量。那是类。以 _ 开头的名称是私有名称，是类或文件的本地名称。没有 _ 的名称是公共名称。）将_rows 声明为late final Row[] _rows;。在initState 中，创建对象：_rows = Row[];。在setState 中，清除行：_rows.clear();。这是最常见的实现方式。

【解决方案2】：

首先声明一个布尔变量。在 onPressed 中，您想在单击时更改变量，我们将其包装在 setState 中，以便小部件自行重建。

bool isVisible = false;
 onPressed: () {
                setState(() {
                  isVisible = true;
                });
              },

要隐藏或显示行，我们只需这样做。

(isVisible)? Row(children: [],) : Container()

这意味着如果 isVisible = true 我们显示 Row() 如果它的 false 我们显示一个空容器。

【讨论】：