在Android中，每个单独的View子类都有一个setVisibility()方法，允许你修改View对象的可见性
有3个设置可见性的选项:
可见:在布局中显示视图 不可见:隐藏视图，但留下一个空白，相当于视图在可见时所占据的空白 消失:隐藏视图，并将其完全从布局中移除。就好像它的高和宽都是0dp
对于Flutter中的小部件，是否有与上述相同的东西?
快速参考: https://developer.android.com/reference/android/view/View.html#attr_android:visibility
当前回答
bool _visible = false;
void _toggle() {
setState(() {
_visible = !_visible;
});
}
onPressed: _toggle,
Visibility(
visible:_visible,
child: new Container(
child: new Container(
padding: EdgeInsets.fromLTRB(15.0, 0.0, 15.0, 10.0),
child: new Material(
elevation: 10.0,
borderRadius: BorderRadius.circular(25.0),
child: new ListTile(
leading: new Icon(Icons.search),
title: new TextField(
controller: controller,
decoration: new InputDecoration(
hintText: 'Search for brands and products', border: InputBorder.none,),
onChanged: onSearchTextChanged,
),
trailing: new IconButton(icon: new Icon(Icons.cancel), onPressed: () {
controller.clear();
onSearchTextChanged('');
},),
),
),
),
),
),
其他回答
正如@CopsOnRoad已经强调的那样， 您可以使用Visibility小部件。但是，如果你想保持它的状态，例如，如果你想建立一个viewpager，让一个按钮根据页面出现和消失，你可以这样做
void checkVisibilityButton() {
setState(() {
isVisibileNextBtn = indexPage + 1 < pages.length;
});
}
Stack(children: <Widget>[
PageView.builder(
itemCount: pages.length,
onPageChanged: (index) {
indexPage = index;
checkVisibilityButton();
},
itemBuilder: (context, index) {
return pages[index];
},
controller: controller,
),
Container(
alignment: Alignment.bottomCenter,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Visibility(
visible: isVisibileNextBtn,
child: "your widget"
)
],
),
)
]))
Flutter现在包含一个可见性小部件，您可以使用它来显示/隐藏小部件。小部件还可以通过更改替换来在两个小部件之间切换。
这个小部件可以实现任何可见、不可见、消失等状态。
Visibility(
visible: true //Default is true,
child: Text('Ndini uya uya'),
//maintainSize: bool. When true this is equivalent to invisible;
//replacement: Widget. Defaults to Sizedbox.shrink, 0x0
),
bool _visible = false;
void _toggle() {
setState(() {
_visible = !_visible;
});
}
onPressed: _toggle,
Visibility(
visible:_visible,
child: new Container(
child: new Container(
padding: EdgeInsets.fromLTRB(15.0, 0.0, 15.0, 10.0),
child: new Material(
elevation: 10.0,
borderRadius: BorderRadius.circular(25.0),
child: new ListTile(
leading: new Icon(Icons.search),
title: new TextField(
controller: controller,
decoration: new InputDecoration(
hintText: 'Search for brands and products', border: InputBorder.none,),
onChanged: onSearchTextChanged,
),
trailing: new IconButton(icon: new Icon(Icons.cancel), onPressed: () {
controller.clear();
onSearchTextChanged('');
},),
),
),
),
),
),
定义:
不可见:小部件占用屏幕上的物理空间，但对用户不可见。这可以使用可见度小部件来实现。
消失:小部件不占用任何物理空间，完全消失。这可以使用Visibility, if或if-else条件来实现。
无形的例子:
Visibility(
child: Text("Invisible"),
maintainSize: true,
maintainAnimation: true,
maintainState: true,
visible: false,
),
例子:
Visibility(
child: Text("Gone"),
visible: false,
),
使用如果:
对于一个孩子: 列( 孩子们:<部件> ( Text('Good Morning')， //始终可见 if (wishOnePerson) Text(' Mr ABC')， //只有条件为真时才可见 ), ） 对于多个孩子: 列( 孩子:( Text('Good Morning')， //始终可见 如果(但愿)……[//只有当condition为true时，这些子元素才可见 文本(“ABC先生”), 文本(“DEF先生”), 文本(“某某先生”), ), ), ）
使用if - else:
对于一个孩子: 列( 孩子们:<部件> ( //基于'isMorning'条件，只有一个是可见的 if (isMorning) Text('Good Morning') Text ('Good Evening')， ), ） 对于多个孩子: 列( 孩子:( //在' beforeSunset '条件下，只会显示一个子元素 if (beforeSunset)…［ 文本(“早上好”), 文本('下午好'), 其他的…［ 文本(“晚上好”), 文本('晚安'), ), ), ）
class VisibilityExample extends StatefulWidget {
const VisibilityExample({Key? key}) : super(key: key);
@override
_VisibilityExampleState createState() => _VisibilityExampleState();
}
class _VisibilityExampleState extends State<VisibilityExample> {
bool visible = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Lines'),
),
body: Container(
color: Colors.black87,
child: Stack(alignment: Alignment.bottomCenter, children: [
ListView(
shrinkWrap: true,
children: [
Container(
height: 200,
),
InkWell(
onTap: () {},
onHover: (value) {
print(value);
setState(() {
visible = !visible;
});
},
child: Visibility(
maintainSize: true,
maintainAnimation: true,
maintainState: true,
visible: visible,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
color: Colors.white54,
icon: const Icon(
Icons.arrow_left_outlined,
),
onPressed: () {},
),
const SizedBox(
width: 5,
),
IconButton(
color: Colors.white54,
icon: const Icon(
Icons.add_circle_outlined,
),
onPressed: () {},
),
const SizedBox(
width: 5,
),
IconButton(
color: Colors.white54,
icon: const Icon(
Icons.remove_circle,
),
onPressed: () {},
),
const SizedBox(
width: 5,
),
IconButton(
color: Colors.white54,
icon: const Icon(
Icons.arrow_right_outlined,
),
onPressed: () {},
),
const SizedBox(
width: 5,
),
IconButton(
color: Colors.white54,
icon: const Icon(Icons.replay_circle_filled_outlined),
onPressed: () {},
),
],
),
),
),
],
),
]),
),
);
}
}
