如何在操作中删除特定的行小部件

Question

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

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);
  }
}

Answer 1

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

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

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

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

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

Answer 2

调用Rows.add方法前检查状态变量isVisible:

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

build 方法内部：

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

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

如何在操作中删除特定的行小部件

How to remove specific Row widget on action

setstate

dart

flutter