flutter中 点击 图片显示隐藏
时间: 2023-08-07 15:05:51 浏览: 169
在Flutter中,可以使用`GestureDetector`和`Visibility`来实现点击图片显示或隐藏。
以下是一个示例代码,可以在点击图片时显示或隐藏一个文本框。
```dart
import 'package:flutter/material.dart';
class MyScreen extends StatefulWidget {
@override
_MyScreenState createState() => _MyScreenState();
}
class _MyScreenState extends State<MyScreen> {
bool _isVisible = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('My Screen'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
GestureDetector(
child: Image.asset('assets/images/my_image.png'),
onTap: () {
setState(() {
_isVisible = !_isVisible;
});
},
),
Visibility(
visible: _isVisible,
child: Text('This is my text.'),
),
],
),
),
);
}
}
```
在这个示例中,我们使用了`GestureDetector`来监听图片的点击事件,并使用`Visibility`来根据`_isVisible`变量的值来显示或隐藏文本框。在`onTap`回调中,我们使用`setState`方法来更新`_isVisible`变量的值,以便重新构建UI并更新文本框的可见性。
阅读全文