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

Question

我有一个Column小部件，我只想让它在用户点击添加新按钮时可见。我正在使用Flutter提供的Visibility小部件，并使用setState((更改Visibility小程序类中的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(),
),
],
);