flutter FloatingActionButton 显示和隐藏
时间: 2024-05-06 10:15:34 浏览: 247
flutter web登录和注册页
要在 Flutter 中显示或隐藏 FloatingActionButton,可以使用 `Visibility` widget。首先,在你的 StatefulWidget 或 StatelessWidget 中定义一个布尔变量 `_isVisible` 来控制 FloatingActionButton 的可见性。
然后,在返回 Widget 的 build 方法中,将 FloatingActionButton 包装在 `Visibility` widget 中,并将其 `visible` 属性设置为 `_isVisible`。当 `_isVisible` 为 true 时,FloatingActionButton 将显示;当 `_isVisible` 为 false 时,它将隐藏。
以下是一个示例代码:
```dart
import 'package:flutter/material.dart';
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool _isVisible = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter FloatingActionButton 显示和隐藏'),
),
body: Center(
child: Text(
'Hello, World!',
style: TextStyle(fontSize: 24),
),
),
floatingActionButton: Visibility(
visible: _isVisible,
child: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
);
}
}
```
在上面的示例中,当 `_isVisible` 为 true 时,FloatingActionButton 将显示在屏幕中央;当 `_isVisible` 为 false 时,它将被隐藏。你可以通过改变 `_isVisible` 变量的值来控制 FloatingActionButton 的可见性。
阅读全文