在 Flutter 中使用 Visibility Widget 切换小部件显示答案

【问题标题】：Using Visibility Widget in Flutter to toggle widgets display在 Flutter 中使用 Visibility Widget 切换小部件显示
【发布时间】：2020-12-16 18:25:36
【问题描述】：

我有一个列小部件，我只想在用户点击添加新按钮时使其可见。我正在使用 Visibility widget Flutter 提供的，我正在使用 setState() 来更改 Visibility 小部件类中的 visible 属性。它不起作用。

我会忽略什么？在下面找到我的代码 sn-p：

bool _addNewTax = false;

FlatButton.icon(
    color: kBgCircleColour,
    padding: EdgeInsets.all(15.0),
    icon: Icon(
      FontAwesomeIcons.plusSquare,
      color: kThemeStyleButtonFillColour,
    ),
    onPressed: () {
      setState(() {
        _addNewTax = true;
      });
        Visibility(
          visible: _addNewTax,
          child: _buildTaxInputFields(),
        );
    },
    label: Text(
      'Add new tax',
      style: kRegularTextStyle,
    ),
  );

我的 _buildTaxInputFields 函数如下：

      _buildTaxInputFields() {
        return Column(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(20.0),
              child: TextFormField(
                initialValue: inputValue,
                textAlign: TextAlign.left,
                onSaved: () {},
                decoration: kTextFieldDecoration.copyWith(hintText: 'tax name e.g. VAT, service charge, etc'),
                ),
            Padding(
              padding: const EdgeInsets.all(20.0),
              child: TextFormField(
                initialValue: inputValue,
                textAlign: TextAlign.left,
                onSaved: () {},
                decoration: kTextFieldDecoration.copyWith(hintText: 'tax percentage e.g. 20, 19.5'),
                ),
            Row(
              children: <Widget>[
                Expanded(
                  flex: 1,
                  child: RadioListTile(
                    title: Text('I\'ll bear it '),
                    value: TaxBearer.merchant,
                    groupValue: _taxBearer,
                    onChanged: (TaxBearer value) {
                      setState(() {
                        _taxBearer = value;
                      });
                    },
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: RadioListTile(
                      title: Text('Push to customer'),
                      value: TaxBearer.customer,
                      groupValue: _taxBearer,
                      onChanged: (TaxBearer value) {
                        setState(() {
                          _taxBearer = value;
                        });
                      }),
                ),
              ],
            ),
          ],
        );
      }

【问题讨论】：

不要将Visibility 小部件放在onPressed 函数中。把它放在小部件树中。

标签： flutter flutter-layout visibility flutter-animation

【解决方案1】：

您的可见性小部件将永远不会呈现，因为您是在按钮的 onPressed 方法中生成它。您可以使用列在按钮下方生成它，如下所示：

bool _addNewTax = false;
Column(
  children: [
   FlatButton.icon(
    color: kBgCircleColour,
    padding: EdgeInsets.all(15.0),
    icon: Icon(
      FontAwesomeIcons.plusSquare,
      color: kThemeStyleButtonFillColour,
    ),
    onPressed: () {
      setState(() {
        _addNewTax = true;
      });
    },
    label: Text(
      'Add new tax',
      style: kRegularTextStyle,
    ),
  ),
  Visibility(
    visible: _addNewTax,
    child: _buildTaxInputFields(),
  ),
 ],
);

【讨论】：