flutter切换页面后隐藏组件
时间: 2023-07-29 19:11:35 浏览: 158
在Flutter中,可以通过使用`Visibility`小部件来隐藏或显示组件。`Visibility`小部件可以控制其子组件是否可见,可以使用`visible`属性来设置是否显示子组件。
以下是一个简单的例子,展示如何在切换页面后隐藏一个组件:
```dart
import 'package:flutter/material.dart';
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool _showText = true;
void _toggleVisibility() {
setState(() {
_showText = !_showText;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Visibility(
visible: _showText,
child: Text(
'Hello World!',
style: Theme.of(context).textTheme.headline4,
),
),
RaisedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (BuildContext context) => SecondPage()));
},
child: Text('Go to Second Page'),
)
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _toggleVisibility,
tooltip: 'Toggle Visibility',
child: Icon(Icons.visibility),
),
);
}
}
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Second Page'),
),
body: Center(
child: RaisedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Go back to Home Page'),
),
),
);
}
}
```
在这个例子中,我们使用`Visibility`小部件来隐藏或显示文本组件。我们还添加了一个浮动操作按钮来切换文本组件的可见性。当我们切换到第二个页面时,文本组件将被隐藏,当我们返回到主页面时,文本组件将再次显示。
注意,我们在`_toggleVisibility`方法中使用`setState`来通知Flutter框架重新构建小部件树,以更新组件的状态。这是因为`Visibility`小部件的`visible`属性是一个可变状态,需要使用`setState`来更新。
阅读全文