简易的新闻榜单搭建
2024-11-26 15:59:37
230次阅读
0个评论
一、首先搭建出代码的基本结构
@Entry
@Component
struct News{
build() {
}
}
二、再利用线性布局Column进行布局。
@Entry
@Component
struct News{
build() {
Column(){
}
}
}
这里有一个需要注意的点。 如果我们直接在Column中写text文本的话
@Entry
@Component
struct News{
build() {
Column(){
Text("1")
Text("河北文旅杀疯了")
}
}
}
达到的效果是这样的,很显然这种格式不是我们见到的新闻榜单格式 这时候,我们就要在Column中再写线性布局ROW Column主要是垂直的线性布局,而ROW是水平的线性布局。
@Entry
@Component
struct News{
build() {
Column(){
Row(){
Text("1")
Text("河北文旅杀疯了")
}
}
}
}
这时候,它的格式就是我们需要的格式了。然后再对其进行调整即可
@Entry
@Component
struct News{
build() {
Column(){
Row(){
Text("1、").fontSize(30).margin({left:10})
Text("河北文旅杀疯了").fontSize(25)
Text("爆").fontSize(25).borderRadius(10).borderWidth(1).backgroundColor(Color.Orange).fontColor(Color.White).margin({left:10})
}.margin({top:50})
Row(){
Text("2、").fontSize(30).margin({left:10})
Text("").fontSize(25)
Text("爆").fontSize(25).margin({left:10}).borderRadius(10).borderWidth(1).backgroundColor(Color.Orange).fontColor(Color.White)
}.margin({top:25})
Row(){
Text("3、").fontSize(30).margin({left:10})
Text("").fontSize(25)
Text("爆").fontSize(25).margin({left:10}).borderRadius(10).borderWidth(1).backgroundColor(Color.Orange).fontColor(Color.White)
}.margin({top:25})
Row(){
Text("4、").fontSize(30).margin({left:10})
Text("").fontSize(25)
Text("爆").fontSize(25).margin({left:10}).borderRadius(10).borderWidth(1).backgroundColor(Color.Orange).fontColor(Color.White)
}.margin({top:25})
Row(){
Text("5、").fontSize(30).margin({left:10})
Text("").fontSize(25)
Text("爆").fontSize(25).margin({left:10}).borderRadius(10).borderWidth(1).backgroundColor(Color.Orange).fontColor(Color.White)
}.margin({top:25})
}
}
}
实现的效果就是
01
- 0回答
- 1粉丝
- 0关注
相关话题
- 元服务:简易计算机页面
- 基础控件——新闻示例
- 鸿蒙开发:搭建属于自己的私服共享包平台
- [HarmonyOS NEXT 实战案例:新闻阅读应用] 基础篇 - 水平分割布局构建新闻阅读界面
- 鸿蒙版Flutter环境搭建
- 02-开发环境搭建
- 元服务登录页面搭建
- 元服务——介绍及环境搭建
- 鸿蒙版Taro搭建开发环境
- 鸿蒙实战开发:网络层的艺术——优雅封装与搭建指南(中)
- 鸿蒙实战开发:网络层的艺术——优雅封装与搭建指南(上)
- 鸿蒙实战开发:网络层的艺术——优雅封装与搭建指南(下)
- 「Mac畅玩鸿蒙与硬件30」UI互动应用篇7 - 简易计步器
- 「Mac畅玩鸿蒙与硬件35」UI互动应用篇12 - 简易日历
- 「Mac玩转仓颉内测版1」入门篇1 - Cangjie环境的搭建