序言
别因今天的懒惰，让明天的您后悔。输出文章的本意并不是为了得到赞美，而是为了让自己能够学会总结思考；当然，如果有幸能够给到你一点点灵感或者思考，那么我这篇文章的意义将无限放大。
背景
最近感觉基础的知识学习会一点点了，然后准备写一个小工具app了，想着就开心；这个时候怎么绘画一个UI界面就是我首要任务了，我参考了很多网站，然后发现uiverse网站的UI很是好看，最后在左选右选下选择了这个卡片效果，大家看看我用鸿蒙CSS（暂且我们这样称呼他）画的还可以吧！
你将学习了解到什么？
我在上篇文章中有说道：“将用vue的视角去学习和写文章分享”，我今天也将我怎么去学习制作这个卡片的思路分享给大家；今天大家将学习到鸿蒙的css中一些属性：
- 阴影
- 渐变
- 缩放
- 圆角
首先我们先来思考一些，如果你在vue当中或者说你用HTML怎么来实现上个示例图卡片的实现逻辑；我相信大家肯定有许多许多的思路，我这儿就说说我的思路吧！
- 背景盒子是一个渐变颜色，然后被一个小盒子覆盖
- 中间的小盒子在原有的基础上缩小到了0.98的样子
- 圆角肯定是必不可少的
- 最后就是一个阴影效果让他发光
我们知道了实现逻辑那就好办了，这个时候我们要知道的就是鸿蒙中的CSS属性对应的是那些了。
- 阴影（shadow）
- 渐变（linearGradient）
- 缩放（scale）
- 圆角（borderRadius）
具体的参数最好大家还是去看看官网，我这儿就不做说明了。下面跟大家展示单个卡片效果：
Column(){
Column({ space: 15 }){
Text('图片压缩')
.fontColor('#74ebd5')
.fontSize(24)
Text('png、jpg、jpeg等图片压缩2')
.fontColor('#666')
.fontSize(12)
.lineHeight(20)
.textAlign(TextAlign.Center)
}
.shadow({
radius: 20,
color: "#74ebd5",
offsetX: 0, // X轴偏移量
offsetY: 0 // Y轴偏移量
})
.scale({ x: 0.98, y: 0.98, centerX: '50%', centerY: '50%' })
.padding(20)
.width(155)
.height(155)
.borderRadius(20)
.backgroundColor('#1a1a1a')
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Center)
}
.width(155)
.height(155)
.borderRadius(20)
.linearGradient({
angle: 165,
direction: GradientDirection.RightBottom,
colors:[
['#74ebd5',0.0],['#acb6e5 ',1.0]
]
})
.justifyContent(FlexAlign.Center)
完整代码
以下代码是示例图所展示代码的所有UI代码，大家可以参考一下；当然也可以修改成你想要的样子。
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
@State statusBarHeight: number = 0;
@State navBarHeight: number = 0;
@State backgroundColorStyle: string = '#212121';
build() {
RelativeContainer() {
Column(){
Column(){
}
.height(this.statusBarHeight)
List({ space: 16 }) {
// 轮播盒子
ListItem(){
Column(){
Column({ space: 12 }){
Text('一涵工具箱')
.fontColor('#fff')
.fontSize(26)
.textAlign(TextAlign.Center)
Text('免费日常工具箱合集、您值得拥有~')
.fontColor('#666')
.fontSize(14)
.lineHeight(24)
}
.padding({
top: 40
})
.scale({ x: 0.98, y: 0.98, centerX: '50%', centerY: '50%' })
.width('100%')
.height(140)
.borderRadius(20)
.backgroundColor('#1a1a1a')
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Start)
}
.width('calc(100% - 40vp)')
.margin({
top: 30,
left: 20,
right: 20,
})
.height(140)
.borderRadius(20)
.linearGradient({
angle: 165,
direction: GradientDirection.RightBottom,
colors:[
['#74ebd5',0.0],['#acb6e5 ',1.0]
]
})
.justifyContent(FlexAlign.Center)
}
// 第一个盒子
ListItem(){
Row({
space: 20,
}) {
Column(){
Column({ space: 15 }){
Text('图片压缩')
.fontColor('#74ebd5')
.fontSize(24)
Text('png、jpg、jpeg等图片压缩2')
.fontColor('#666')
.fontSize(12)
.lineHeight(20)
.textAlign(TextAlign.Center)
}
.shadow({
radius: 20,
color: "#74ebd5",
offsetX: 0, // X轴偏移量
offsetY: 0 // Y轴偏移量
})
.scale({ x: 0.98, y: 0.98, centerX: '50%', centerY: '50%' })
.padding(20)
.width(155)
.height(155)
.borderRadius(20)
.backgroundColor('#1a1a1a')
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Center)
}
.width(155)
.height(155)
.borderRadius(20)
.linearGradient({
angle: 165,
direction: GradientDirection.RightBottom,
colors:[
['#74ebd5',0.0],['#acb6e5 ',1.0]
]
})
.justifyContent(FlexAlign.Center)
Column(){
Column({ space: 15 }){
Text('图片压缩')
.fontColor('#74ebd5')
.fontSize(24)
Text('png、jpg、jpeg等图片压缩2')
.fontColor('#666')
.fontSize(12)
.lineHeight(20)
.textAlign(TextAlign.Center)
}
.shadow({
radius: 20,
color: "#acb6e5",
offsetX: 0, // X轴偏移量
offsetY: 0 // Y轴偏移量
})
.scale({ x: 0.98, y: 0.98, centerX: '50%', centerY: '50%' })
.padding(20)
.width(155)
.height(155)
.borderRadius(20)
.backgroundColor('#1a1a1a')
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Center)
}
.width(155)
.height(155)
.borderRadius(20)
.linearGradient({
angle: 165,
direction: GradientDirection.RightBottom,
colors:[
['#74ebd5',0.0],['#acb6e5 ',1.0]
]
})
.justifyContent(FlexAlign.Center)
}
.width('100%')
.padding(20)
.justifyContent(FlexAlign.SpaceBetween)
}
}
.layoutWeight(1)
}
.alignRules({
// center: { anchor: '__container__', align: VerticalAlign.Top }, GradientDirection.RightBottom
// middle: { anchor: '__container__', align: HorizontalAlign.Center }
})
.width('100%')
.height('100%')
.backgroundColor(this.backgroundColorStyle)
}
.height('100%')
.width('100%')
}
onPageShow(): void {
this.onIndexStatus();
}
onIndexStatus(): void {
window.getLastWindow(getContext(this), (error, topWindow) =>{
if (topWindow) {
let area = topWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
this.statusBarHeight = px2vp((area.topRect.height));
this.navBarHeight = px2vp(area.bottomRect.height);
}
})
};
}
总结
我对UI审美上有很大的缺陷，虽然单个卡片或者样式觉得很好看，但是整体结合起来就拉胯了，还得好好在设计设计，争取这款工具类的app不仅实用，而且还好看；今天就到这儿了吧，都凌晨了，晚安！
