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 来跟踪按钮的点击状态(虽然在这个例子中我们实际上并不需要这个状态,但为了展示如何使用这些概念,我还是保留了它)。
  • 你可以根据需要调整布局和样式。




相关文章
|
3月前
|
安全 Java Android开发
为什么大厂要求安卓开发者掌握Kotlin和Jetpack?深度解析现代Android开发生态优雅草卓伊凡
为什么大厂要求安卓开发者掌握Kotlin和Jetpack?深度解析现代Android开发生态优雅草卓伊凡
171 0
为什么大厂要求安卓开发者掌握Kotlin和Jetpack?深度解析现代Android开发生态优雅草卓伊凡
|
11月前
|
JavaScript Java Kotlin
|
11月前
|
JavaScript Java Kotlin
Kotlin开发笔记 - 常量与变量
Kotlin开发笔记 - 常量与变量
71 2
|
11月前
|
IDE 开发工具 Kotlin
Kotlin开发笔记 - 参数与异常
本教程详细讲解Kotlin语法,适合深入学习。若需快速掌握,可参考“简洁”系列教程。内容涵盖具名参数、变长参数、默认参数、多返回值及异常处理等核心概念,助你高效编程。
82 1
|
11月前
|
Java 开发者 Kotlin
Kotlin开发笔记- 分支与循环
本系列教程详细讲解了Kotlin语法,适合需要深入了解Kotlin的开发者。若需快速学习Kotlin,可参考“简洁”系列教程。本文重点介绍了Kotlin中的分支语句(if...else 和 when)及循环语句(for 和 while),并提供了丰富的示例代码,帮助读者掌握这些核心语法。
66 1
|
11月前
|
Kotlin
|
XML Java 程序员
Android开发:App点击跳转到网页的实现
在Android开发过程中,点击App里面的控件进行网页跳转是经常会遇到的需求,但是Android的网页跳转有两种方式实现App点击控件跳转到网页,第一种就是App里面的代码根据网址链接进行网页跳转,第二种就是根据Webview控件进行网页跳转。
745 1
Android开发:App点击跳转到网页的实现
|
2月前
|
人工智能 文字识别 小程序
旅游社用什么工具收报名 + 资料?不开发 App 也能自动收集信息
本文探讨了旅游行业中报名信息收集的常见痛点及解决方案,重点介绍了二维码表单工具在提升信息收集效率、简化操作流程方面的优势。通过对比多种工具,分析其适用场景与实际应用逻辑,为一线旅游从业者提供高效、低成本的执行参考。
|
3月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
仓颉语言实战分享,教你如何用仓颉开发外卖App界面。内容包括页面布局、导航栏自定义、搜索框实现、列表模块构建等,附完整代码示例。轻松掌握Scroll、List等组件使用技巧,提升HarmonyOS应用开发能力。
|
3月前
|
IDE 开发工具 开发者
使用DevEcoStudio 开发、编译鸿蒙 NEXT_APP 以及使用中文插件
# 使用DevEcoStudio 开发、编译鸿蒙 NEXT_APP 以及使用中文插件 #鸿蒙开发工具 #DevEco Studio
293 1