【Android、IOS、Flutter、鸿蒙、ReactNative 】文本Text显示

XML布局 参考

android:text

<TextViewandroid:id="@+id/textview"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Android Java TextView"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent" />

 android:textSize

<TextViewandroid:id="@+id/textview"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Android Java TextView"android:textSize="28sp"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent" />

 android:textStyle

<TextViewandroid:id="@+id/textview"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Android Java TextView"android:textStyle="bold"android:textSize="28sp"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent" />

 文本显示一行

<TextViewandroid:id="@+id/textview"android:layout_width="200dp"android:layout_height="wrap_content"android:text="Android Java TextView Android Java TextView Android Java TextView"android:textStyle="bold"android:textSize="28sp"android:maxLines="1"android:ellipsize="end"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent" />

Compose 布局 参考

build.gradle下面配置

 

 导入依赖包:

import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
class MainComposeActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent { showTextView() }}
}@Preview
@Composable
private fun showTextView() {Text(text = "Android Compose TextView",fontSize = 28.sp,fontStyle = FontStyle.Italic)
}

解决无法预览Preview

通过 Android Studio 工具执行 Invalidate Caches

 文本显示一行

Text(text = "Android Compose TextView Android Compose TextView Android Compose TextView ",fontSize = 28.sp,fontStyle = FontStyle.Italic,maxLines = 1,overflow = TextOverflow.Ellipsis
)

Flutter 布局 参考

Text('Flutter Dart TextView',style: TextStyle(fontSize: 12.sp, fontWeight: FontWeight.bold),
),

 显示一行文本

Text('Flutter Dart TextView Flutter Dart TextView Flutter Dart TextView ',maxLines: 1,overflow: TextOverflow.ellipsis,style: TextStyle(fontSize: 28.sp,fontWeight: FontWeight.bold,),
)

HarmonyOS布局 参考

DevEco Studio版本

显示文本

Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)

 预览Previewer 问题

显示一行文本 

Text(this.message).fontSize(50).fontWeight(FontWeight.Bold).maxLines(1).textOverflow({overflow:TextOverflow.Ellipsis})

IOS Object-c 布局 参考

显示一行文本

#import "ViewController.h"@interface ViewController ()@end@implementation ViewController- (void)viewDidLoad {[super viewDidLoad];// Do any additional setup after loading the view.UITextView* textView = [[UITextView alloc]initWithFrame:CGRectMake(0, 100, 320, 300)];NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc]initWithString:@"IOS Object-c TextView IOS Object-c TextView IOS Object-c TextView IOS Object-c TextView"];[attributedString addAttribute:NSFontAttributeName value:[UIFont boldSystemFontOfSize:28.0] range:NSMakeRange(0, attributedString.length)];textView.textContainer.maximumNumberOfLines = 1;textView.textContainer.lineBreakMode =  NSLineBreakByTruncatingTail;textView.attributedText = attributedString;[self.view addSubview:textView];
}@end

 

IOS Swift 布局 参考

显示一行文本

import UIKitclass ViewController: UIViewController {override func viewDidLoad() {super.viewDidLoad()// Do any additional setup after loading the view.let attributedString = NSMutableAttributedString(string: "Ios Swift TextView Ios Swift TextView Ios Swift TextView Ios Swift TextView")attributedString.addAttribute(NSAttributedString.Key.font, value: UIFont.boldSystemFont(ofSize: 28.0), range: NSRange(location: 0, length: attributedString.length))let textView = UITextView(frame: CGRect(x: 0, y: 100, width: 320, height: 300))textView.attributedText = attributedStringtextView.textContainer.maximumNumberOfLines = 1;textView.textContainer.lineBreakMode =  .byTruncatingTailself.view.addSubview(textView)}}

 

React Native 布局 参考 

显示一行文本

import React from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';
import {name as appName} from './app.json';const ReactNativeTextView = () => {return (<View style={styles.container}><Text numberOfLines={1} ellipsizeMode="tail" style={styles.hello}>React Native TextView React Native TextView</Text></View>);
};
const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',},hello: {fontSize: 28.0,textAlign: 'center',margin: 10,},
});AppRegistry.registerComponent(appName,() => ReactNativeTextView,
);

 

搭建开发者环境

设置淘宝npm镜像

npm config set registry https://registry.npmmirror.com/

检查当前使用的镜像

npm config get registry

Cannot find module 'react-scripts/package.json'

执行如下命令:npm install --save react-scripts

执行 export 配置环境

export JAVA_HOME= Java环境变量安装路径

例如 :

修改gradle镜像路径 

修改成 阿里云镜像

运行到安卓平台

采用 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.xdnf.cn/news/12293.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

FPGA学习笔记#7 Vitis HLS 数组优化和函数优化

本笔记使用的Vitis HLS版本为2022.2&#xff0c;在windows11下运行&#xff0c;仿真part为xcku15p_CIV-ffva1156-2LV-e&#xff0c;主要根据教程&#xff1a;跟Xilinx SAE 学HLS系列视频讲座-高亚军进行学习 学习笔记&#xff1a;《FPGA学习笔记》索引 FPGA学习笔记#1 HLS简介及…

深入浅出JUC常用同步器

文章目录 1.JUC下同步器1.1 CountdownLatch 倒计数锁存器1.2 CyclicBarrier回环屏障1.3 Semephone 信号量 2.小结 1.JUC下同步器 日常开发会遇到主线程开启多个子线程去并行执行任务&#xff0c;并且主线程需要等待所有子线程执行完后在进行汇总的场景。 同步器出现之前&…

工位管理新策略:Spring Boot企业级应用

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常…

CAN总线物理层特性详细分析

目录 1. 简介 2. CAN总线拓扑图 3. CAN硬件电路 4. CAN电平标准 5. CAN收发器-TJA1050&#xff08;高速CAN&#xff09; 6. CAN物理层特性 1. 简介 CAN总线&#xff08;Controller Area Network Bus&#xff09;控制器局域网总线&#xff0c;是由BOSCH公司开发的一…

2024AAAI | DiffRAW: 利用扩散模型从手机RAW图生成单反相机质量的RGB图像

文章标题&#xff1a;《DiffRAW: Leveraging Diffusion Model to Generate DSLR-Comparable Perceptual Quality sRGB from Smartphone RAW Images》 原文链接&#xff1a;DiffRAW 本文是清华大学深圳研究院联合华为发表在AAAI-2024上的论文&#xff08;小声bb&#xff1a;华…

idea出现的问题

1.idea正常的运行,但是debug失败 原因&#xff1a;debug模式中使用的jdk和你在环境变量中配置的不是同一个jdk。或者说三处地方修改一致即可 1.File/Project Structure/Project Settings/Modules中的SDK 2.File/Project Structure/Platform Settings 中的SDKS 3.Run/Debug Conf…

uni-app之数据驱动的picker选择器( uni-data-picker)之可以选择到任意级别

背景说明 uni-app 官方的插件市场有数据驱动选择器&#xff0c;可以用作多级分类的场景。本人引入插件后&#xff0c;发现&#xff0c;在h5和微信小程序都只能选择到叶子级。而在给出的官方组件示例中确并非如此。 以选择年级&#xff0c;而不选择班级。然后&#xff0c;想试试…

vue3如何修改element ui input中type属性为textarea的高度

效果&#xff1a; 方法一&#xff1a;直接使用autosize <el-input:maxlength"500":autosize"{ minRows: 5, maxRows: 5 }"type"textarea"v-model"form.description"placeholder"请输入描述"></el-input> 方法二…

紫光展锐携手上赞随身Wi-Fi,让5G触手可及

近年来&#xff0c;随着各类移动应用层出不穷&#xff0c;人们对随时随地上网的需求日益增强&#xff0c;随身 Wi-Fi 设备以其便捷性、灵活性和相对较低的成本&#xff0c;成为用户满足办公、社交、娱乐等多元化需求的重要工具。5G技术的逐步普及为随身Wi-Fi市场注入了新的活力…

第四十三章 Vue之mapMutations简化mutations操作

目录 一、引言 二、完整代码 2.1. App.vue 2.2. main.js 2.3. Son1.vue 2.4. Son2.vue 2.5. index.js 一、引言 本章节我们通过掌握辅助函数mapMutations&#xff0c;来简化前面章节中调用mutations函数的繁琐方式。mapMutations 和 mapState很像&#xff0c;它是把位于…

C++编程语言:抽象机制:派生类(Bjarne Stroustrup)

第20章 派生类(Dirived Classes) 目录 20.1 引言 20.2 派生类 20.2.1 类成员函数 20.2.2 类构造函数和析构函数 20.3 派层次结构 20.3.1 类型域(Type Fields) 20.3.2 虚函数(Virtual Functions) 20.3.3 显式修饰(Explicit Qualification) 20.3.4 覆盖控制(O…

Qt--命令行终端程序开发

提示&#xff1a;本文为学习记录&#xff0c;若有错误&#xff0c;请联系作者&#xff0c;谦虚受教。 文章目录 前言一、头文件二、cpp文件三、使用流程如图所示 总结 前言 Constant dropping wears the stone. 一、头文件 #ifndef TERMINALWIDGET_H #define TERMINALWIDGET_…

一文了解珈和科技在农业遥感领域的服务内容和能力

2020年&#xff0c;农业农村部、中央网信办联合印发了《数字农业农村发展规划&#xff08;2019-2025年&#xff09;》&#xff0c;对数字农业农村建设作出了具体部署。其中&#xff0c;农业遥感作为推进数字农业农村的重要力量贯穿《规划》始终。 今年10月&#xff0c;农业农村…

D65【python 接口自动化学习】- python基础之数据库

day65 SQL-DQL-分组聚合 学习日期&#xff1a;20241111 学习目标&#xff1a;MySQL数据库-- 133 SQL-DQL-分组聚合 学习笔记&#xff1a; 分组聚合 总结 分组聚合的语法 分组聚合的注意事项 group by 中出现了哪个列&#xff0c;哪个列才能出现在select中的非聚合中

初学mongoDB

MongoDB 是一个开源的 NoSQL 数据库&#xff0c;由 C 语言编写。它与传统的关系型数据库不同&#xff0c;MongoDB 使用的是一种基于文档的存储模型&#xff0c;不需要定义固定的表结构&#xff0c;可以灵活地存储和管理大量的非结构化数据。下面是 MongoDB 的一些核心特性&…

DAY59||并查集理论基础 |寻找存在的路径

并查集理论基础 并查集主要有两个功能&#xff1a; 将两个元素添加到一个集合中。判断两个元素在不在同一个集合 代码模板 int n 1005; // n根据题目中节点数量而定&#xff0c;一般比节点数量大一点就好 vector<int> father vector<int> (n, 0); // C里的一…

基于Spring Boot的乡政府管理系统设计与实现,LW+源码+讲解

摘 要 传统办法管理信息首先需要花费的时间比较多&#xff0c;其次数据出错率比较高&#xff0c;而且对错误的数据进行更改也比较困难&#xff0c;最后&#xff0c;检索数据费事费力。因此&#xff0c;在计算机上安装乡政府管理系统软件来发挥其高效地信息处理的作用&#xf…

【NLP】使用 PyTorch 从头构建自己的大型语言模型 (LLM)

读完这篇文章后&#xff0c;你会取得什么成就&#xff1f;你将能够自己构建和训练大型语言模型 (LLM)&#xff0c;同时与我一起编写代码。虽然我们正在构建一个将任何给定文本从英语翻译成马来语的 LLM&#xff0c;但你可以轻松地修改此 LLM 架构以用于其他语言翻译任务。 LLM…

QT打包应用程序文件步骤

QT应用程序&#xff08;.exe&#xff09;打包复制到其他电脑 在QT程序在自己电脑编译好了后&#xff0c;需要打包给其他人。这里介绍一下详细步骤&#xff1a; 确定编译器 搜了很多相关的打包教程&#xff0c;但是还是会出现“应用程序无法正常启动(0xc000007b)”这类错误。经过…

JMeter进阶篇

目录 上篇导航&#xff1a; 总目录&#xff1a; 一、逻辑控制器&#xff1a; 1.逻辑控制器和关联&#xff1a; 2.if逻辑控制器&#xff1a; 3.forEach控制器&#xff1a; 4.循环控制器&#xff1a; 二、关联&#xff1a; 1.xpath&#xff1a; 2.正则表达式提取器&…