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

Android Studio 版本

Android Java TextView 实现 点击事件 参考

Dart 复制代码
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 {

    @Override
    protected 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() {
            @Override
            public void onClick(View view) {
                Log.i("MainActivity","TextView 被点击了!!!");
            }
        });
    }
}

Android Kotlin TextView 实现 点击事件 参考

Dart 复制代码
import android.os.Bundle
import android.util.Log
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class 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 实现 点击事件 参考

导入依赖包

Dart 复制代码
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功能

Dart 复制代码
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.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            showTextView()
        }
    }
    
    @Preview
    @Composable
    private 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 点击事件 参考

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

点击 pub get

鸿蒙 Text 点击事件 参考

Dart 复制代码
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 点击事件 参考

Dart 复制代码
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 (
    <Text
        onPress={() => {
            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-androidnpm start 运行

运行到IOS平台

采用 npx react-native run-iosnpm start 运行

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

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

案例

相关推荐
西西学代码2 分钟前
Flutter---坐标网格图标
前端·javascript·flutter
zhifanxu7 分钟前
flutter布局调试
flutter
00后程序员张11 分钟前
Swoole HTTPS 实战,在生产环境部署、性能权衡与排查流程
后端·ios·小程序·https·uni-app·iphone·swoole
2501_915909064 小时前
iOS App 上架全流程详解:证书配置、打包上传、审核技巧与跨平台上架工具 开心上架 实践
android·ios·小程序·https·uni-app·iphone·webview
2501_915106324 小时前
iOS 26 系统流畅度测试实战分享,多工具组合辅助策略
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_915918414 小时前
开发 iOS 应用全流程指南,环境搭建、证书配置与跨平台使用 开心上架 上架AppStore
android·ios·小程序·https·uni-app·iphone·webview
方君宇4 小时前
iOS App小组件(Widget)显示LottieFiles动画和GIF图片
ios
Digitally4 小时前
如何将 iPhone 联系人同步到 Mac
macos·ios·iphone
Digitally4 小时前
无需 iCloud 在 iPhone 之间传输文本消息
ios·iphone·icloud