如何在操作中洗掉特定的Row小部件

如何在 Flutter 網頁中洗掉螢屏中的特定行？我在 StatefulWidget“EditForm2”中有 2 行。兩行都有 Text、TextFormField 和 Button 來洗掉整行。實作這一目標的好方法是什么？我假設我必須在 Row 表上使用 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);
  }
}

uj5u.com熱心網友回復：

首先宣告一個bool變數。在 onPressed 中，您希望在單擊時更改變數，我們將其包裝在 setState 中，以便小部件自行重建。

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

要隱藏或顯示行，我們只需執行此操作。

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

這意味著如果 isVisible = true 我們顯示 Row() 如果它是 false 我們顯示一個空容器。

uj5u.com熱心網友回復：

isVisible在呼叫Rows.add方法之前檢查狀態變數：

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

build方法內部：

if (_isVisible) ? Rows.add(RowGeoInfo);

這將在每次重繪 時動態添加/洗掉行。每次呼叫setState頁面都會重繪 。

標籤：扑 镖 设置状态

上一篇：未選擇芯片時如何禁用按鈕？

下一篇：如何對從函式回傳的流進行單元測驗？