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

Question

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

我可能忽略了什么？在下面找到我的代码片段：

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

Answer 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(),
  ),
 ],
);

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

Using Visibility Widget in Flutter to toggle widgets display

visibility

flutter

flutter-layout

flutter-animation