【Android、IOS、Flutter、鸿蒙、ReactNative 】文本点击事件

server/2024/11/14 8:38:46/

Android Studio 版本

Android Java TextView 实现 点击事件 参考

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;public class MainActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initListener();}private void initListener(){TextView textView=findViewById(R.id.textView);textView.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {Log.i("MainActivity","TextView 被点击了!!!");}});}
}

Android Kotlin TextView 实现 点击事件 参考

import android.os.Bundle
import android.util.Log
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivityclass MainActivity : AppCompatActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContentView(R.layout.activity_main)initListener()}private fun initListener() {val textView = findViewById<TextView>(R.id.textView)textView.setOnClickListener { Log.i("MainActivity", "TextView 被点击了!!!") }}
}

 Android Compose Text 实现 点击事件 参考

导入依赖包

dependencies {......implementation ("androidx.activity:activity-compose:1.3.1")implementation("androidx.compose.material:material:1.4.3")implementation("androidx.compose.ui:ui-tooling:1.4.3")}

启用Compose功能

import android.os.Bundle
import android.util.Log
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.spclass MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {showTextView()}}@Preview@Composableprivate fun showTextView() {Box(modifier = Modifier.fillMaxWidth().height(200.dp).background(Color(0xff6200EE)), contentAlignment = Alignment.Center) {Text(text = "Android Compose TextView",fontSize = 20.sp,fontStyle = FontStyle.Normal,modifier = Modifier.clickable {Log.i("MainActivity", "TextView 被点击了!!!!")},textAlign = TextAlign.Center,color = Color(0xffffffff),)}}}

Xcode 版本

IOS Object-c UITextView 点击事件 参考

 IOS SWift UITextView 点击事件

 

 Flutter Text 点击事件 参考

GestureDetector(onTap: () {if (kDebugMode) {print('Flutter Text 点击事件......');}},child: Text('Flutter Text 点击事件',style: TextStyle(fontSize: 18.sp),),
)

点击 pub get 

 

鸿蒙 Text 点击事件 参考

import hilog from '@ohos.hilog'@Entry
@Component
struct Index {@State message: string = 'HarmonyOs Text 点击事件'build() {Column() {Text(this.message).fontSize(20).fontWeight(FontWeight.Bold).width('100%').onClick(() => {hilog.info(0x0000, 'IndexTag', '%{public}s', 'HarmonyOs Text 点击事件!!!')}).height('100%').textAlign(TextAlign.Center)}.height('100%').width('100%')}
}

打开后出现如下情况点击 Migrate Assistant

点击预览 Preview

ReactNative Text 点击事件 参考

import React from 'react';
import {AppRegistry,Text,StyleSheet,Alert} from 'react-native';
import App from './App';
import {name as appName} from './app.json';const textClick = () => {return (<TextonPress={() => {Alert.alert('你点击了按钮!');}}style={styles.text} >点击我</Text>);
};const styles = StyleSheet.create({text: {with:'100%', // 宽度height:100, // 高度textAlign: 'center', // 水平居中backgroundColor: '#ffcc00', // 设置背景颜色textAlignVertical: 'center', // 垂直居中},
});AppRegistry.registerComponent(appName, () => textClick);

 

执行 npm install 安装项目所需要的依赖

运行到安卓

采用 npx react-native run-android 或 npm start 运行

 

运行到IOS平台

采用 npx react-native run-ios 或 npm start 运行

 切换到iOS目录从新安装依赖 

// 清除缓存
pod cache clean  --all//移出本地 pod文件依赖
pod  deintegrate//执行安装显示下载信息
pod install --verbose --no-repo-update


 

案例


http://www.ppmy.cn/server/141429.html

相关文章

【Rust.Crate之tracing 诊断系统】

Rust.Crate之tracing 诊断系统 前言diagnostics systemtracing标签 #[tracing::instrument]异步函数中spanInstrument中的&#xff1f;tracing_subscribertracing 的原生Subscribers总结 前言 日志对于每一个开发者来说并不陌生&#xff0c;开发者通常希望在程序代码中的一些需…

【已解决】Postman:Get请求传JSON数据

解决方案 将 JSON 对象转换为字符串&#xff0c;然后进行 URL 编码&#xff0c;最后作为查询参数附加到 URL 上。 例如&#xff0c;如果有一个 JSON 对象 {“key”: “value”}&#xff0c;你可以先将其转为字符串形式 “{“key”: “value”}”&#xff0c;然后 URL 编码得到…

Redis经典面试题-深度剖析

redis是单线程架构还是多线程架构 Redis 的核心操作是单线程架构&#xff0c;但在某些场景中也会使用多线程。 Redis 的大部分操作&#xff08;如键值存储、查询、更新等&#xff09;是通过单线程完成的&#xff0c;即所有客户端的请求在 Redis 中按顺序执行。这种设计主要出…

数据分析-44-时间序列预测之深度学习方法TCN

文章目录 1 TCN简介1.1 网络示意图1.2 TCN优点2 模拟应用2.1 模拟数据2.2 预处理创建滞后特征2.3 划分训练集和测试集2.4 创建TCN模型2.5 模型训练2.6 模型预测3 自定义my_TCN模型3.1 my_TCN()函数3.2 训练模型3.3 模型预测3.4 改进4 参考附录1 TCN简介 时间卷积网络(TCN)是…

前端权限控制代码

使用场景&#xff1a; 前端页面根据权限码&#xff0c;对页面模块、组件的显示控制。支持场景&#xff1a; 在js代码里&#xff0c;进行同步、异步权限判断、拦截登操作&#xff1b;在templete里通过v-if指令&#xff0c;控制组件、元素的显示&#xff1b; API说明&#xff1…

RHCE-第四章:ssh远程连接服务器

一、SSH介绍 SSH&#xff08;Secure Shell Protocol&#xff0c;安全的壳程序协议&#xff09;它可以通过数据包加密技术将等待传输的数据包加密后再传输到网络上。ssh协议本身提供两个服务器功能&#xff1a;一个是类似telnet的远程连接使用shell的服务器&#xff1b;另一个就…

[CKS] CIS基准测试,修复kubelet和etcd不安全项

目前的所有题目为2024年10月后更新的最新题库&#xff0c;考试的k8s版本为1.31.1 ​ 专栏其他文章: [CKS] Create/Read/Mount a Secret in K8S-CSDN博客[CKS] Audit Log Policy-CSDN博客 -[CKS] 利用falco进行容器日志捕捉和安全监控-CSDN博客[CKS] K8S NetworkPolicy Set Up-C…