kotlin开发安卓app,JetPack Compose框架,给webview新增一个按钮,点击刷新网页

简介: 在Kotlin中开发Android应用,使用Jetpack Compose框架时,可以通过添加一个按钮到TopAppBar来实现WebView页面的刷新功能。按钮位于右上角,点击后调用`webViewState?.reload()`来刷新网页内容。以下是代码摘要:

kotlin开发安卓app,JetPack Compose框架,给webview新增一个按钮,点击刷新网页。 按钮在上方topAppBar右上角




通义千问


import androidx.activity.compose.BackHandler
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Refresh
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import androidx.compose.ui.viewinterop.AndroidView
import android.webkit.WebView
import android.webkit.WebViewClient
import android.webkit.CookieManager

@Composable
fun TopAppBarWithWebViewAndRefresh(url: String) {
    val context = LocalContext.current
    var webViewState by remember { mutableStateOf<WebView?>(null) }
    var isRefreshing by remember { mutableStateOf(false) }

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text(text = "Web View with Refresh") },
                actions = {
                    IconButton(onClick = { 
                        if (webViewState != null) {
                            isRefreshing = true
                            webViewState?.reload()
                        }
                    }) {
                        Icon(Icons.Default.Refresh, contentDescription = "Refresh")
                    }
                }
            )
        }
    ) {
        Column(
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Top
        ) {
            AndroidView(
                factory = {
                    WebView(context).apply {
                        webViewClient = object : WebViewClient() {
                            override fun onPageFinished(view: WebView?, url: String?) {
                                super.onPageFinished(view, url)
                                // 页面加载完成后设置Cookie
                                CookieManager.getInstance().apply {
                                    setAcceptThirdPartyCookies(this@apply, true)
                                    CookieManager.getInstance().setCookie(url ?: "", "YOUR_COOKIE_STRING")
                                }
                                isRefreshing = false // 页面加载完,停止刷新状态
                            }
                        }
                        settings.javaScriptEnabled = true
                        loadUrl(url)
                        webViewState = this
                    }
                },
                modifier = Modifier.weight(1f)
            )
            
            // 可选:显示刷新指示器
            if (isRefreshing) {
                CircularProgressIndicator(modifier = Modifier.align(Alignment.CenterHorizontally))
            }
        }
    }
}

// 使用示例
@Composable
fun MyApp() {
    TopAppBarWithWebViewAndRefresh("https://www.example.com")
}



在这个示例中,我们使用了Scaffold来组织界面,TopAppBar中包含了一个刷新按钮(图标)。点击刷新按钮时,会调用webViewState?.reload()刷新WebView,同时更新isRefreshing状态来控制是否显示刷新指示器(如CircularProgressIndicator)。

请确保将"YOUR_COOKIE_STRING"替换为实际的Cookie值,并且遵循所有相关的隐私和安全规范。







GPT-4o


import android.os.Bundle
import android.webkit.WebView
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.google.accompanist.web.WebView
import com.google.accompanist.web.WebViewClient
import com.google.accompanist.web.rememberWebViewState

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApp()
        }
    }
}

@Composable
fun MyApp() {
    val initialUrl = "https://www.example.com"
    val webViewState = rememberWebViewState(url = initialUrl)
    val webView = remember { WebView(this).apply { webViewClient = WebViewClient() } }

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text(text = "WebView Example") },
                actions = {
                    IconButton(onClick = {
                        webViewState.reload()
                    }) {
                        Icon(Icons.Default.Refresh, contentDescription = "Refresh")
                    }
                }
            )
        }
    ) {
        WebView(
            state = webViewState,
            modifier = Modifier.fillMaxSize(),
            onCreated = { webView -> 
                webView.settings.javaScriptEnabled = true
            }
        )
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MyApp()
}


解释

  1. 依赖配置:
  • 在 build.gradle 中添加了 Accompanist WebView 库的依赖。
  1. MainActivity.kt:
  • 使用 Scaffold 组件设置界面布局,包括一个 TopAppBar。
  • 使用 IconButton 添加一个刷新按钮,点击该按钮时调用 webViewState.reload() 来刷新WebView。
  • 使用 WebView 组件来显示网页内容,并设置 JavaScript 支持。
  1. Compose UI:
  • MyApp Composable 中,定义了一个 WebViewState 和 WebView。
  • 使用 TopAppBar 设置标题和动作按钮。
  • IconButton 设置刷新按钮,点击时调用 webViewState.reload() 刷新 WebView。
  1. 预览:
  • 使用 DefaultPreview Composable 预览布局效果。

通过上述代码,你可以使用 Jetpack Compose 在一个 Android 应用中嵌入一个 WebView,并在 TopAppBar 的右上角添加一个刷新按钮。点击按钮可以刷新 WebView 中显示的网页。请根据具体需求进一步调整和优化代码。








文心一言


import android.webkit.WebView  
import android.webkit.WebViewClient  
import androidx.activity.ComponentActivity  
import androidx.activity.compose.setContent  
import androidx.compose.foundation.layout.*  
import androidx.compose.runtime.Composable  
import androidx.compose.runtime.mutableStateOf  
import androidx.compose.runtime.remember  
import androidx.compose.ui.Alignment  
import androidx.compose.ui.Modifier  
import androidx.compose.ui.platform.ComposeView  
import androidx.compose.ui.platform.LocalContext  
import androidx.compose.ui.res.painterResource  
import androidx.compose.ui.tooling.preview.Preview  
import androidx.compose.ui.unit.dp  
import androidx.compose.ui.viewinterop.AndroidView  
import com.google.accompanist.appbar.TopAppBar  
import com.google.accompanist.insets.navigationBarsPadding  
  
@Composable  
fun WebViewScreen() {  
    val webView = remember { WebView(LocalContext.current) }  
  
    // 初始化 WebView(例如加载 URL)  
    webView.webViewClient = object : WebViewClient() {  
        override fun onPageFinished(view: WebView?, url: String?) {  
            super.onPageFinished(view, url)  
            // 页面加载完成的代码  
        }  
    }  
  
    webView.loadUrl("http://www.example.com")  
  
    var refreshButtonClicked by remember { mutableStateOf(false) }  
  
    // 刷新 WebView 的函数  
    fun refreshWebView() {  
        webView.reload()  
    }  
  
    Scaffold(  
        topBar = {  
            TopAppBar(  
                title = { Text("WebView") },  
                actions = {  
                    IconButton(onClick = { refreshButtonClicked = true; if (refreshButtonClicked) refreshWebView() }) {  
                        Icon(painter = painterResource(id = /* 刷新图标的资源ID */), contentDescription = "Refresh")  
                    }  
                },  
                modifier = Modifier  
                    .fillMaxWidth()  
                    .navigationBarsPadding()  
            )  
        },  
        content = {  
            Box(  
                modifier = Modifier  
                    .fillMaxSize()  
                    .padding(16.dp)  
            ) {  
                AndroidView(  
                    factory = { context -> webView },  
                    modifier = Modifier.fillMaxSize()  
                )  
            }  
        }  
    )  
}  
  
class MainActivity : ComponentActivity() {  
    override fun onCreate(savedInstanceState: Bundle?) {  
        super.onCreate(savedInstanceState)  
        setContent {  
            WebViewScreen()  
        }  
    }  
}


注意:

  • 你需要为刷新按钮提供一个图标资源ID。
  • AndroidView 用于在 Compose 中嵌入 WebView。
  • TopAppBar 的 actions 参数用于放置右上角的按钮。
  • 使用 mutableStateOf 和 remember 来跟踪按钮的点击状态(虽然在这个例子中我们实际上并不需要这个状态,但为了展示如何使用这些概念,我还是保留了它)。
  • 你可以根据需要调整布局和样式。




相关文章
|
移动开发 前端开发 Android开发
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
2064 12
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
移动开发 JavaScript 应用服务中间件
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
1311 5
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
移动开发 Rust JavaScript
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
1368 4
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
移动开发 Android开发
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
628 0
|
安全 Java Android开发
为什么大厂要求安卓开发者掌握Kotlin和Jetpack?深度解析现代Android开发生态优雅草卓伊凡
为什么大厂要求安卓开发者掌握Kotlin和Jetpack?深度解析现代Android开发生态优雅草卓伊凡
619 0
为什么大厂要求安卓开发者掌握Kotlin和Jetpack?深度解析现代Android开发生态优雅草卓伊凡
|
编译器 Android开发 开发者
带你了解Android Jetpack库中的依赖注入框架:Hilt
本文介绍了Hilt,这是Google为Android开发的依赖注入框架,基于Dagger构建,旨在简化依赖注入过程。Hilt通过自动化的组件和注解减少了DI的样板代码,提高了应用的可测试性和可维护性。文章详细讲解了Hilt的主要概念、基本用法及原理,帮助开发者更好地理解和应用Hilt。
1206 18
|
测试技术 数据库 Android开发
深入解析Android架构组件——Jetpack的使用与实践
本文旨在探讨谷歌推出的Android架构组件——Jetpack,在现代Android开发中的应用。Jetpack作为一系列库和工具的集合,旨在帮助开发者更轻松地编写出健壮、可维护且性能优异的应用。通过详细解析各个组件如Lifecycle、ViewModel、LiveData等,我们将了解其原理和使用场景,并结合实例展示如何在实际项目中应用这些组件,提升开发效率和应用质量。
757 6
|
安全 Java Android开发
探索安卓应用开发的新趋势:Kotlin和Jetpack Compose
在安卓应用开发领域,随着技术的不断进步,新的编程语言和框架层出不穷。Kotlin作为一种现代的编程语言,因其简洁性和高效性正逐渐取代Java成为安卓开发的首选语言。同时,Jetpack Compose作为一个新的UI工具包,提供了一种声明式的UI设计方法,使得界面编写更加直观和灵活。本文将深入探讨Kotlin和Jetpack Compose的特点、优势以及如何结合使用它们来构建现代化的安卓应用。
727 11
|
API 调度 Android开发
告别回调地狱,拥抱流畅开发体验:Kotlin协程带你解锁异步编程新姿势,让App响应速度飙升!
【9月更文挑战第11天】随着移动互联网的发展,用户对应用体验的要求不断提高,异步编程因此变得尤为重要。Kotlin凭借简洁的语法和强大的功能,在Android开发中脱颖而出。协程作为Kotlin的核心特性之一,简化了异步代码编写,提高了程序性能与可维护性。
390 5
|
移动开发 定位技术 Android开发
「揭秘高效App的秘密武器」:Kotlin Flow携手ViewModel,打造极致响应式UI体验,你不可不知的技术革新!
【9月更文挑战第12天】随着移动开发领域对响应式编程的需求增加,管理应用程序状态变得至关重要。Jetpack Compose 和 Kotlin Flow 的组合提供了一种优雅的方式处理 UI 状态变化,简化了状态管理。本文探讨如何利用 Kotlin Flow 增强 ViewModel 功能,构建简洁强大的响应式 UI。
521 3