Button控制图片显示隐藏

点击Button,图片隐藏,再次点击,图片显示。
MainActivity.java

package com.example.hades.demo;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {
    ImageView img;
    Button bt;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        img = (ImageView)findViewById(R.id.imageView);
        bt = (Button)findViewById(R.id.button);
        bt.setOnClickListener(new click());
    }

    private class click implements View.OnClickListener {
        @Override
        public void onClick(View v) {
            if (img.isShown()) {
                img.setVisibility(View.INVISIBLE);
                bt.setText("show");
            } else {
                img.setVisibility(View.VISIBLE);
                bt.setText("fade");
            }
        }
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.hades.demo.MainActivity">

    <LinearLayout
        android:layout_width="368dp"
        android:layout_height="495dp"
        android:orientation="vertical"
        tools:layout_editor_absoluteY="8dp"
        tools:layout_editor_absoluteX="8dp">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@mipmap/header" />

        <Button
            android:id="@+id/button"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Button" />
    </LinearLayout>
</android.support.constraint.ConstraintLayout>

运行

这里写图片描述
这里写图片描述

### React 中控制 `img` 标签显示隐藏的方法 在 React 中,可以通过条件渲染来控制组件或 DOM 元素的显示隐藏。具体来说,可以使用状态管理工具(如 `useState`),并通过布尔值判断是否渲染指定的元素。 以下是一个完整的示例代码,展示如何通过按钮点击操作控制 `img` 标签的显示隐藏: ```jsx import React, { useState } from 'react'; function App() { // 定义一个状态变量 isImageVisible 来控制图片显示与否 const [isImageVisible, setIsImageVisible] = useState(true); // 处理显示/隐藏逻辑 const handleToggleImage = () => { setIsImageVisible(!isImageVisible); }; return ( <div style={{ textAlign: 'center', marginTop: '50px' }}> {/* 如果 isImageVisible 为 true,则渲染 img 标签 */} {isImageVisible && ( <img src="https://via.placeholder.com/150" alt="Example" style={{ maxWidth: '100%', height: 'auto' }} /> )} {/* 按钮用于切换图片显示隐藏 */} <button onClick={handleToggleImage} style={{ marginTop: '20px' }}> {isImageVisible ? '隐藏图片' : '显示图片'} </button> </div> ); } export default App; ``` #### 关键点解析 - **状态管理**:通过 `useState` 创建了一个名为 `isImageVisible` 的状态变量,默认初始值设为 `true` 表示图片可见[^3]。 - **条件渲染**:利用 JavaScript 的短路运算符 `&&` 实现条件渲染。只有当 `isImageVisible` 为真时,才会渲染 `img` 标签。 - **事件处理**:定义了 `handleToggleImage` 函数,在每次点击按钮时更新 `isImageVisible` 的值,从而达到切换的效果[^3]。 --- #### 可选扩展:动态更改图片路径 如果还需要动态修改图片路径,可以进一步增强功能。例如: ```jsx import React, { useState } from 'react'; function App() { const [imageSrc, setImageSrc] = useState('https://via.placeholder.com/150'); const [isImageVisible, setIsImageVisible] = useState(true); const handleToggleImage = () => { setIsImageVisible(!isImageVisible); }; const handleChangeImage = () => { setImageSrc(imageSrc === 'https://via.placeholder.com/150' ? 'https://via.placeholder.com/200' : 'https://via.placeholder.com/150'); }; return ( <div style={{ textAlign: 'center', marginTop: '50px' }}> {isImageVisible && ( <img src={imageSrc} alt="Dynamic Example" style={{ maxWidth: '100%', height: 'auto' }} /> )} <button onClick={handleToggleImage} style={{ marginRight: '10px' }}> {isImageVisible ? '隐藏图片' : '显示图片'} </button> <button onClick={handleChangeImage}> 更换图片 </button> </div> ); } export default App; ``` 在此扩展中,新增了一个状态变量 `imageSrc` 用来存储当前图片的 URL 地址,并提供另一个按钮实现图片更换的功能。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值