【HarmonyOS】ArkUI - Image、Text、TextInput、Button、Slider 基本用法

Tyhoo Wu

已于 2024-03-04 15:41:33 修改

阅读量1k

点赞数 28

CC 4.0 BY-SA版权

分类专栏： HarmonyOS 文章标签：鸿蒙 harmonyos 鸿蒙系统 arkts arkui

于 2024-02-07 13:06:02 首次发布

本文链接：https://blog.csdn.net/cnwutianhao/article/details/136067935

一、Image - 图片显示组件

声明 Image 组件并设置图片源

Image(src: string | PixelMap | Resource)

src：图片源。是一个联合类型（Union Types），支持三种格式

string 格式，通常用来加载网络图片

 Image('https://xxx.png')

注：使用 Stage 模型的应用，需要在 module.json5 文件中声明网络访问权限
"requestPermissions": [
 {
    "name": 'ohos.permission.INTERNET'
 }
]

PixelMap 格式，可以加载像素图，常用在图片编辑中
```
 Image(pixelMapObject)
```

Resource 格式，加载本地图片

 Image($r('app.media.icon')) -> 读取 media 目录里的图片

 或

 Image($rawfile('icon.png')) -> 读取 rawfile 目录里的图片

添加图片属性
- 设置组件通用属性：
```
 Image($r('app.media.icon'))
```

最低0.47元/天解锁文章

新学期VIP享超值加赠

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Tyhoo Wu

关注关注

28
点赞
踩
16

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

鸿蒙5.0版开发：ArkUI框架开发-文本输入 (TextInput/TextArea)

m0_73088370的博客

10-30

786

TextInput、TextArea是输入框组件，通常用于响应用户的输入操作......

HarmonyOs 4.0 Next（纯血鸿蒙开发）：【第一篇】ArkUI组件基础开发 Image、Text、TextInput、Button、Slider、Column、Row、布局组件

Forever_Hopeful的博客

03-07

2033

HarmonyOs 4.0 Next（纯血鸿蒙开发）：【第一篇】ArkUI组件基础开发 Image、Text、TextInput、Button、Slider、Column、Row、布局组件

1 条评论您还未登录，请先登录后发表或查看评论

【愚公系列】2023年12月 HarmonyOS教学课程 019-ArkUI组件（TextInput/TextArea）

热门推荐

时光隧道

12-07

6万+

/ xxx.ets@Entry@Componentbuild() {Column() {TextInput({placeholder:'我是提示文本'})TextInput({placeholder:'我是提示文本',text:'我是当前文本内容'})TextInput({placeholder:'我是提示文本',text:'我是当前文本内容'})

ArkUI组件--TextInput组件（文本输入）

qq_53312564的博客

12-04

1216

①placeholder：输入框无输入时的提示文本（默认显示文本，浅色，直接输入即可）②text：输入框当前的文本内容（也是默认显示文本，深色，如有需要可以修改）

ArkTS-ArkUI组件-TextInput组件

qq_74367835的博客

05-22

5914

ArkTS-ArkUI组件-TextInput组件

鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之TextInput输入框组件

zy0412326的专栏

12-22

1798

鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之TextInput/TextArea输入框组件

鸿蒙HarmonyOS实战-ArkUI组件（页面路由）_arkui 怎么实现页面跳转(3)

2401_84181070的博客

04-21

1324

/ 弹出自定义的询问框message: ‘您还没有完成支付，确定要返回吗？’,buttons: [text: ‘取消’,},text: ‘确认’,// 用户点击了“取消”按钮// 用户点击了“确认”按钮// 调用router.back()方法，返回上一个页面})@Entry@Componentbuild() {Column() {Row(){Row(){})

鸿蒙HarmonyOS 4.0应用开发从入门到实战视频.zip

11-09

07.ArkUI组件-TextInput.mp4 08.ArkUI组件-Button.mp4 09.ArkUI组件-Slider.mp4 10.ArkUI组件-Column和Row.mp4 11.ArkUI组件-循环控制.mp4 12.ArkUI组件-List.mp4 13.ArkUI-自定义组件.mp4 14-ArkUI-状态管理@State...

HarmonyOS Next开发学习手册——UI开发（组件布局）

maniuT的博客

07-15

1458

组件（Component）是构建页面的核心，每个组件通过对数据和方法的简单封装，实现独立的可视、可交互功能单元。组件之间相互独立，随取随用，也可以在需求相同的地方重复使用。关于组件的详细参考文档请参见组件。开发者还可以通过组件间合理的搭配定义满足业务需求的新组件，减少开发量，自定义组件的开发方法请参见自定义组件。

ArkUI---使用文本---文本输入 (TextInput/TextArea)

m0_73992525的博客

11-18

698

TextInput、TextArea是输入框组件，通常用于响应用户的输入操作，比如评论区的输入、聊天框的输入、表格的输入等，也可以结合其它组件构建功能页面，例如登录注册页面。文本框主要用于获取用户输入的信息，把信息处理成数据进行上传，绑定onChange事件可以获取输入框内改变的内容。NUMBER_DECIMAL带小数点的数字输入模式。NUMBER_PASSWORD纯数字密码输入模式。NEW_PASSWORD新密码输入模式。USER_NAME用户名输入模式。Number纯数字输入模式。

4.ArkUI TextInput的介绍和使用

最新发布

长沙火山

04-24

493

TextInput 是 ArkUI 中用于文本输入的核心组件，支持单行、多行输入及多种输入格式控制。

HarmonyOS【ArkUI组件--Text】

m0_62388400的博客

06-16

701

在上一篇博客的基础上继续。

鸿蒙Harmony（五）ArkUI---基础组件：Text、TextInput、Button、Slider

danfengw的博客

12-27

1205

1.设置文案在资源文件中添加对应的文本资源2.属性设置效果。

学习ArkTS -- 常用组件使用

m0_38036750的博客

04-12

1710

学习arkTS 常用组件学习

ArkUI框架，Flex布局，基础组件及封装，父子组件的双向绑定

大河之犬的博客

09-25

2639

Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容器组件，进而对容器内的其他元素进行弹性布局，例如：使三个元素在容器内水平居中，垂直等间隔分散。我们需要拿到用户输入的数据，以向后端发送一个登录请求，这就需要父子组件的双向绑定机制。Previewer的页面无法进行实时的交互操作，所以我们要学会使用真机进行模拟。例如：如下的布局代码分别表示：（垂直排列，水平居中，垂直居中）自定义一个组件内容：（myInput.ets）

【鸿蒙软件开发】ArkTS常用组件之Button

m0_62599305的博客

10-21

8618

Button是按钮组件，通常用于响应用户的点击操作，其类型包括胶囊按钮、圆形按钮、普通按钮。Button当做为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。具体用法请参考Button。Button通过调用接口来创建，接口调用有以下两种形式：创建不包含子组件的按钮。: { type?该接口用于创建不包含子组件的按钮，其中label用来设置按钮文字，type用于设置Button类型，stateEffect属性设置Button是否开启点击效果。

ArkUI TextInput组件

a_strong_pig的博客

12-07

657

ArkUI TextInput组件的使用与响应改变图片宽度的实现。

【ArkUI】常用组件

owo_ovo的博客

12-12

1796

ArkTS常用组件

OpenHarmony开发实战：常用组件与布局（ArkTS(1)，flutter热更新原理

m0_60388419的博客

04-10

926

由于“首页”和“我的”页面中有多处图片和文字的组合，因此提取出ItemData类。在MainViewModel.ets文件中对页面使用的资源进行定义，在MainViewModel.ets文件中定义数据。img?: Resource;others?: Resource;

在.NET 8.0 MAUI中如何布局Button、Slider、Image和Editor控件Slider放在最右边

03-22

<think>嗯，用户想在.NET 8.0 MAUI中布局Button、Slider、Image和Editor控件，并且Slider要右对齐。首先，我需要回忆一下MAUI的布局容器有哪些。常见的包括StackLayout、Grid、HorizontalStackLayout和VerticalStackLayout。用户提到的控件需要横向排列，可能用HorizontalStackLayout，但可能需要结合Grid来实现更灵活的布局。因为Slider需要放在最右侧，单独使用HorizontalStackLayout可能不够，因为默认是按顺序排列，无法自动右对齐。这时候Grid可能更适合，因为它可以通过列的定义来控制位置。然后，Button、Image、Editor可能需要放在左侧，而Slider在右侧。Grid的列可以设置为两部分，左侧用Auto或*来填充剩余空间，右侧固定宽度？或者用Star比例分配。例如，左侧控件放在第一列，Slider放在第二列，并设置HorizontalOptions为End，这样Slider就能右对齐。另外，可能需要考虑控件的排列顺序。比如，Button、Image、Editor在左侧的某个区域，而Slider单独在右侧。使用Grid的话，可以将这些控件放在同一行，不同的列中。比如，Button放在第0列，Image在第1列，Editor在第2列，Slider放在第3列，并且设置第3列的宽度为*，这样Slider会占据剩余空间，并靠右对齐。或者，把前面的控件放在一个HorizontalStackLayout里，然后和Slider一起放入Grid的两列中，这样Slider在右侧。还要注意各个控件的属性设置，比如HorizontalOptions和VerticalOptions。对于Slider，设置HorizontalOptions="End"可以使其在所在列内右对齐。同时，可能需要调整列的宽度，让前面的控件不占用太多空间，使Slider能够正确靠右。另外，可能需要处理控件的大小，比如Editor可能需要扩展高度，使用VerticalOptions="FillAndExpand"等。此外，示例代码需要正确使用Grid的列定义，例如Columns设置为Auto, Auto, *, Auto，或者类似的结构，确保Slider所在的列能够正确右对齐。最后，用户可能需要代码示例，所以需要写出XAML的结构，并解释每个部分的作用。同时，提醒用户可以根据需求调整列宽或使用其他布局容器。例如，使用Grid结合HorizontalStackLayout，或者全部使用Grid来管理各个控件的位置。</think>在.NET 8.0 MAUI中实现Button、Slider（右对齐）、Image和Editor的排列，推荐使用$Grid$或$HorizontalStackLayout$组合布局。以下是两种典型实现方式： ### 方案一：Grid布局（推荐） ```xml <Grid ColumnDefinitions="Auto,Auto,*,Auto" RowDefinitions="Auto" Padding="10">  <Button Text="Click" Grid.Column="0" VerticalOptions="Center"/>  <Image Source="dotnet_bot.png" Grid.Column="1" HeightRequest="40" VerticalOptions="Center"/>  <Editor Placeholder="Input text..." Grid.Column="2" AutoSize="TextChanges" Margin="10,0"/>  <Slider Grid.Column="3" HorizontalOptions="End" WidthRequest="150" VerticalOptions="Center"/> </Grid> ``` 此方案通过$Grid.ColumnDefinitions$的星号（*）定义弹性列宽，使Editor自动填充剩余空间，Slider使用$HorizontalOptions="End"$实现右对齐[^2]。 ### 方案二：HorizontalStackLayout组合布局 ```xml <VerticalStackLayout> <HorizontalStackLayout Spacing="10" VerticalOptions="Center"> <Button Text="Click"/> <Image Source="dotnet_bot.png" HeightRequest="40"/> <Editor Placeholder="Input text..." HorizontalOptions="FillAndExpand"/> <Slider HorizontalOptions="End" WidthRequest="150"/> </HorizontalStackLayout> </VerticalStackLayout> ``` 此方案利用$HorizontalOptions="FillAndExpand"$让Editor扩展宽度，结合$HorizontalOptions="End"$实现Slider右对齐，适合简单排列场景[^2]。