如何在Flutter中以编程方式显示/隐藏小部件
在Android中，每个视图子类都有一个setVisibility（）方法，允许您修改视图对象的可见性
设置可见性有3个选项：
- 可见：呈现布局内部可见的
视图
Flutter中的小部件是否有与上述相同的功能？
快速参考：https://developer.android.com/reference/android/view/View.html#attr_android:visibility
共有3个答案
与问题协作，并展示用空的容器（）替换问题的示例。
下面是一个例子：
import "package:flutter/material.dart";
void main() {
runApp(new ControlleApp());
}
class ControlleApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: "My App",
home: new HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
HomePageState createState() => new HomePageState();
}
class HomePageState extends State<HomePage> {
bool visibilityTag = false;
bool visibilityObs = false;
void _changed(bool visibility, String field) {
setState(() {
if (field == "tag"){
visibilityTag = visibility;
}
if (field == "obs"){
visibilityObs = visibility;
}
});
}
@override
Widget build(BuildContext context){
return new Scaffold(
appBar: new AppBar(backgroundColor: new Color(0xFF26C6DA)),
body: new ListView(
children: <Widget>[
new Container(
margin: new EdgeInsets.all(20.0),
child: new FlutterLogo(size: 100.0, colors: Colors.blue),
),
new Container(
margin: new EdgeInsets.only(left: 16.0, right: 16.0),
child: new Column(
children: <Widget>[
visibilityObs ? new Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
new Expanded(
flex: 11,
child: new TextField(
maxLines: 1,
style: Theme.of(context).textTheme.title,
decoration: new InputDecoration(
labelText: "Observation",
isDense: true
),
),
),
new Expanded(
flex: 1,
child: new IconButton(
color: Colors.grey[400],
icon: const Icon(Icons.cancel, size: 22.0,),
onPressed: () {
_changed(false, "obs");
},
),
),
],
) : new Container(),
visibilityTag ? new Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
new Expanded(
flex: 11,
child: new TextField(
maxLines: 1,
style: Theme.of(context).textTheme.title,
decoration: new InputDecoration(
labelText: "Tags",
isDense: true
),
),
),
new Expanded(
flex: 1,
child: new IconButton(
color: Colors.grey[400],
icon: const Icon(Icons.cancel, size: 22.0,),
onPressed: () {
_changed(false, "tag");
},
),
),
],
) : new Container(),
],
)
),
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new InkWell(
onTap: () {
visibilityObs ? null : _changed(true, "obs");
},
child: new Container(
margin: new EdgeInsets.only(top: 16.0),
child: new Column(
children: <Widget>[
new Icon(Icons.comment, color: visibilityObs ? Colors.grey[400] : Colors.grey[600]),
new Container(
margin: const EdgeInsets.only(top: 8.0),
child: new Text(
"Observation",
style: new TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w400,
color: visibilityObs ? Colors.grey[400] : Colors.grey[600],
),
),
),
],
),
)
),
new SizedBox(width: 24.0),
new InkWell(
onTap: () {
visibilityTag ? null : _changed(true, "tag");
},
child: new Container(
margin: new EdgeInsets.only(top: 16.0),
child: new Column(
children: <Widget>[
new Icon(Icons.local_offer, color: visibilityTag ? Colors.grey[400] : Colors.grey[600]),
new Container(
margin: const EdgeInsets.only(top: 8.0),
child: new Text(
"Tags",
style: new TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w400,
color: visibilityTag ? Colors.grey[400] : Colors.grey[600],
),
),
),
],
),
)
),
],
)
],
)
);
}
}
更新：由于这个答案是写出来的，所以引入了可见性，并为这个问题提供了最佳解决方案。
您可以使用Opacity和Opacity:的0.0来绘制元素，使其隐藏但仍占据空间。
要使其不占用空间，请将其替换为空的容器（）。
编辑：要将其包装在不透明度对象中，请执行以下操作：
new Opacity(opacity: 0.0, child: new Padding(
padding: const EdgeInsets.only(
left: 16.0,
),
child: new Icon(pencil, color: CupertinoColors.activeBlue),
))
Google开发者关于不透明度的快速教程：https://youtu.be/9hltevOHQBw
不可见：小部件占用屏幕上的物理空间，但用户不可见。这可以通过使用可见性小部件来实现。
消失：小部件不占用任何物理空间，完全消失了。这可以使用可见性，if或if-elle条件来实现。
Visibility(
child: Text("Invisible"),
maintainSize: true,
maintainAnimation: true,
maintainState: true,
visible: false,
),
Visibility(
child: Text("Gone"),
visible: false,
),
>
对于一个孩子：
Column(
children: <Widget>[
Text('Good Morning'), // Always visible
if (wishOnePerson) Text(' Mr ABC'), // Only visible if condition is true
],
)
对于多子女：
Column(
children: [
Text('Good Morning'), // Always visible
if (wishAll) ... [ // These children are only visible if condition is true
Text('Mr ABC'),
Text('Mr DEF'),
Text('Mr XYZ'),
],
],
)
>
对于一个孩子：
Column(
children: <Widget>[
// Only one of them is visible based on 'isMorning' condition
if (isMorning) Text('Good Morning')
else Text ('Good Evening'),
],
)
对于多子女：
Column(
children: [
// Only one of the children will be shown based on `beforeSunset` condition
if (beforeSunset) ... [
Text('Good morning'),
Text('Good afternoon'),
] else ... [
Text('Good evening'),
Text('Good night'),
],
],
)
-
问题内容： 在Android中，每个子类都有一个方法，可让您修改对象的可见性 设置可见性有3个选项： 可见：在布局内渲染可见 看不见：隐藏，但留下的间隙等于可见时将占据的间隙 消失：隐藏，并将其完全从布局中删除。这是因为如果它和人 Flutter中的小部件是否具有与上述等同的功能？ 快速参考：https : //developer.android.com/reference/android/vie
-
在Android中，每个子类都有一个方法，它允许您修改对象的可见性 设置可见性有3个选项： 可见：在布局中呈现可见 invisible：隐藏，但会留下一个间隙，该间隙相当于在可见时所占的位置 gone：隐藏并将其完全从布局中删除。就好像它的和是 Flutter中的Widgets是否有与上面等价的东西？ 有关快速参考:https://developer.android.com/reference/a
-
问题内容： 我正在尝试创建一个程序，该程序执行一系列给定的用户输入。仅在某些情况下才需要几个用户输入，并且如果可能的话，我想仅在选择一个Checkbutton（表示存在要求这些输入的情况）时显示这些输入值的Entry框和Labels。我不确定该怎么做： 将我要添加的标签和条目框放在已经存在的行之间。 取消选中“选择”按钮时，“隐藏”标签和输入框，而不进行选择，这样，如果重新选择“选择”按钮，则可以
-
问题内容： 首先，我已经看到了该线程。我尝试了那里给出的可接受的方法。 我的应用程序中有两个屏幕。 第一个有2个EditText，一个是用户名，另一个是密码 第二个有一个ListView和一个EditText-过滤listView 在我的第一个屏幕中，我希望用户名EditText专注于启动，并且Keyboard应该可见。这是我的实现（通过删除不必要的/不相关的代码进行简化）。 app_login.
-
问题内容： 在我的应用程序中，我彼此之间有2 的权利。通过菜单选项，我希望能够使最下面的一个消失，并使最上面的一个消失。 问题是，我不知道如何在Java中执行此操作。 它不必设置动画，我想在时隐藏另一个活动（菜单）的返回内容。菜单上设置了一个我要签入的菜单，并根据其值确定是否需要隐藏或显示底部： 谁能给我一个提示或链接，告诉我该怎么做？ 问题答案： 如果要从布局中删除它，可以致电。 或者，如果您只
-
问题内容： 您如何在Tkinter中显示和隐藏小部件？我想有一个输入框，但不要一直显示它。有人可以向我展示在tkinter中显示和隐藏条目小部件和其他小部件的功能吗？我希望能够在没有多个帧的情况下执行此操作。 问题答案： 这已经在stackoverflow上得到了回答。简短的答案是，您可以使用grid_remove，如果先前是通过网格添加的，则将导致该小部件被删除。记住小部件的位置，因此只需简单地