Flutter 中的不可见性、消失、可见性 ROW 和列
Posted
技术标签:
【中文标题】Flutter 中的不可见性、消失、可见性 ROW 和列【英文标题】：Invisibility , Gone , visibility ROW & Column in Flutter 【发布时间】：2020-02-10 12:56:12 【问题描述】：我在 Flutter 中使用此代码，我想对某些 Row 或 column 进行可见/不可见。 在 android studio 和 java 中我们使用：
msg.setVisibility(View.INVISIBLE);
但是如何在 Flutter 中将 Id 用于 Row 和小部件以及不可见/可见的小部件和 Row ？ 这是我的代码：
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget
@override
Widget build(BuildContext context)
return new MaterialApp(
home : MyHomePage()
);
class MyHomePage extends StatelessWidget
@override
Widget build(BuildContext context)
return new Scaffold(
body: Column(children: <Widget>[
Row(
//ROW 1
children: [
Container(
color: Colors.lightGreen,
margin: EdgeInsets.all(25.0),
child: FlutterLogo(
size: 60.0,
),
),
Container(
color: Colors.orange,
margin: EdgeInsets.all(25.0),
child: FlutterLogo(
size: 60.0,
),
),
],
),
Row(
//ROW 1
children: [
Container(
color: Colors.blueAccent,
margin: EdgeInsets.all(25.0),
child: FlutterLogo(
size: 60.0,
),
),
Container(
color: Colors.green,
margin: EdgeInsets.all(25.0),
child: FlutterLogo(
size: 60.0,
),
),
],
),
]),
bottomNavigationBar: new Container(
color: Colors.redAccent,
height: 55.0,
alignment: Alignment.center,
child: new BottomAppBar(
color: Colors.blueAccent,
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
new IconButton(icon: new Icon(Icons.add , color: Colors.black), onPressed: () print("helllo"); ),
new IconButton(icon: new Icon(Icons.remove , color: Colors.black), onPressed: () print("helllo"); ),
],
),
)
),
);
//MyHomePage
我想使用 IconButton 来显示/不可见两行。 怎么办？
【问题讨论】：
【参考方案1】：可见
Android (Kotlin)
linear_layout.visibility = View.VISIBLE
Android (AndroidX)
linear_layout.isVisible = true
或
linear_layout.isInvisible = false
或
linear_layout.isGone = false
颤动
Row(
children: [
Text(
"Stack Overflow",
),
],
);
或
Visibility(
child: Row(
children: [
Text(
"Stack Overflow",
),
],
),
);
不可见（不可见但保持空间）
Android (Kotlin)
linear_layout.visibility = View.INVISIBLE
Android (AndroidX)
linear_layout.isInvisible = true
颤动
Visibility(
maintainSize: true,
visible: false,
child: Row(
children: [
Text(
"Stack Overflow",
),
],
),
);
或者（当你知道大小时）
Container(
height: 300,
child: Row(
children: [
Text(
"Stack Overflow",
),
],
),
);
走了
Android (Kotlin)
linear_layout.visibility = View.GONE
Android (AndroidX)
linear_layout.isGone = true
or
linear_layout.isVisible = false
颤动
Visibility(
visible: false,
child: Row(
children: [
Text(
"Stack Overflow",
),
],
),
);
【讨论】：
【参考方案2】：你可以像这样使用Visibility：
Visibility(
visible: true,
child: Text("Visible"),
),
Visibility(
visible: false,
maintainState: true,
maintainAnimation: true,
maintainSize: true,
child: Text("Invisible"),
),
Visibility(
visible: true,
child: Text("Visible"),
),
Visibility(
visible: false,
child: Text("Gone"),
),
Visibility(
visible: true,
child: Text("Visible"),
),
这将是结果：
Visible
Visible
Visible
【讨论】：
【参考方案3】：import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget
@override
Widget build(BuildContext context)
return new MaterialApp(
home : MyHomePage()
);
class MyHomePage extends StatefulWidget
@override
State<StatefulWidget> createState()
return _WidgetState();
class _WidgetState extends State<MyHomePage>
bool visible = true;
bool visible1 = true;
@override
Widget build(BuildContext context)
return Scaffold(
body: Column(children: <Widget>[
Visibility(
visible: visible1,
child: Row(
//ROW 1
children: [
Container(
color: Colors.orange,
margin: EdgeInsets.all(25.0),
child: FlutterLogo(
size: 60.0,
),
),
Container(
color: Colors.orange,
margin: EdgeInsets.all(25.0),
child: FlutterLogo(
size: 60.0,
),
),
],
),
),
Visibility(
visible: visible,
child: Row(
//ROW 1
children: [
Container(
color: Colors.green,
margin: EdgeInsets.all(25.0),
child: FlutterLogo(
size: 60.0,
),
),
Container(
color: Colors.green,
margin: EdgeInsets.all(25.0),
child: FlutterLogo(
size: 60.0,
),
),
],
),
),
]),
bottomNavigationBar: new Container(
color: Colors.black,
height: 55.0,
alignment: Alignment.center,
child: new BottomAppBar(
color: Colors.blueAccent,
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
new IconButton(
icon: new Icon(Icons.add, color: Colors.black),
onPressed: ()
print("show");
setState(()
visible1 = true;
);
),
new IconButton(
icon: new Icon(Icons.remove, color: Colors.black),
onPressed: ()
print("hide");
setState(()
visible1 = false;
);
),
],
),
)),
);
【讨论】：
【参考方案4】：有一个名为可见性的特殊小部件。请记住 Flutter 中使用的状态管理反转。您调用 setState() 并为小部件的可见性提供条件。 并且不要忘记将您的 Widget 更改为 StatefulWidget
参考 https://api.flutter.dev/flutter/widgets/Visibility-class.html
用法：
child: Visibility(
visible: false,
),
这是应该在您的场景中工作的示例，它隐藏了单击删除按钮时的行并显示在添加时：
class MyHomePage extends StatefulWidget
@override
State<StatefulWidget> createState()
return _WidgetState();
class _WidgetState extends State<MyHomePage>
bool visible = true;
@override
Widget build(BuildContext context)
return Scaffold(
body: Column(children: <Widget>[
Visibility(
visible: visible,
child: Row(
//ROW 1
children: [
Container(
color: Colors.lightGreen,
margin: EdgeInsets.all(25.0),
child: FlutterLogo(
size: 60.0,
),
),
Container(
color: Colors.orange,
margin: EdgeInsets.all(25.0),
child: FlutterLogo(
size: 60.0,
),
),
],
),
),
Visibility(
visible: visible,
child: Row(
//ROW 1
children: [
Container(
color: Colors.blueAccent,
margin: EdgeInsets.all(25.0),
child: FlutterLogo(
size: 60.0,
),
),
Container(
color: Colors.green,
margin: EdgeInsets.all(25.0),
child: FlutterLogo(
size: 60.0,
),
),
],
),
),
]),
bottomNavigationBar: new Container(
color: Colors.redAccent,
height: 55.0,
alignment: Alignment.center,
child: new BottomAppBar(
color: Colors.blueAccent,
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
new IconButton(
icon: new Icon(Icons.add, color: Colors.black),
onPressed: ()
print("show");
setState(()
visible = true;
);
),
new IconButton(
icon: new Icon(Icons.remove, color: Colors.black),
onPressed: ()
print("hide");
setState(()
visible = false;
);
),
],
),
)),
);
【讨论】：
将此与我的示例相结合，并与 IconButton 可见/不可见。以上是关于Flutter 中的不可见性、消失、可见性 ROW 和列的主要内容，如果未能解决你的问题，请参考以下文章