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




相关文章
|
4月前
|
移动开发 前端开发 Android开发
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
548 12
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
4月前
|
移动开发 JavaScript 应用服务中间件
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
476 5
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
7月前
|
移动开发 前端开发 JavaScript
鸿蒙NEXT时代你所不知道的全平台跨端框架:CMP、Kuikly、Lynx、uni-app x等
本篇基于当前各大活跃的跨端框架的现状,对比当前它们的情况和未来的可能,帮助你在选择框架时更好理解它们的特点和差异。
785 0
|
4月前
|
移动开发 Rust JavaScript
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
895 4
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
5月前
|
JSON 自然语言处理 数据格式
使用Tabs选项卡组件快速搭建鸿蒙APP框架
ArkUI提供了很多布局组件,其中Tabs选项卡组件可以用于快速搭建鸿蒙APP框架,本文通过案例研究Tabs构建鸿蒙原生应用框架的方法和步骤。
489 5
使用Tabs选项卡组件快速搭建鸿蒙APP框架
|
4月前
|
移动开发 Android开发
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
257 0
|
机器学习/深度学习 存储 人工智能
MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
MNN-LLM App 是阿里巴巴基于 MNN-LLM 框架开发的 Android 应用,支持多模态交互、多种主流模型选择、离线运行及性能优化。
9757 80
MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
|
8月前
|
安全 Java Android开发
为什么大厂要求安卓开发者掌握Kotlin和Jetpack?深度解析现代Android开发生态优雅草卓伊凡
为什么大厂要求安卓开发者掌握Kotlin和Jetpack?深度解析现代Android开发生态优雅草卓伊凡
386 0
为什么大厂要求安卓开发者掌握Kotlin和Jetpack?深度解析现代Android开发生态优雅草卓伊凡
《仿盒马》app开发技术分享-- 兑换订单列表框架(75)
上一节我们针对订单兑换的业务逻辑进行了完善,成功的在兑换物品之后修改了用户信息的修改,新增了积分消费的记录。这一节我们实现订单创建之后进入的列表展示页框架。
147 0
|
Java 测试技术 持续交付
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
本文重点讲解如何搭建App自动化测试框架的思路,而非完整源码。主要内容包括实现目的、框架设计、环境依赖和框架的主要组成部分。适用于初学者,旨在帮助其快速掌握App自动化测试的基本技能。文中详细介绍了从需求分析到技术栈选择,再到具体模块的封装与实现,包括登录、截图、日志、测试报告和邮件服务等。同时提供了运行效果的展示,便于理解和实践。
1051 4
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路