Android开发人员学习小程序系列之组件位置

xiaoxiao2022-07-01 128

Android开发人员学习小程序系列之组件位置

本文首发至我的个人公众号：Android开发圈（id：RainYang_WX）

引言

在Android开发中，我们设置控件的位置，首先确定目标控件是在哪种布局下的，常见的布局有RelativeLayout(相对布局)、LinearLayout(绝对布局)、ConstraintLayout(约束性布局) 等等。是先确定了目标控件的父容器，然后再根据对应的属性来控制目标控件位置。

比如在父容器是RelativeLayout的情况下，我们想要控制Button控件的位置，我们可以通过：

android:layout_alignParentBottom="" android:layout_alignParentStart="" android:layout_centerInParent="" ... ...

等属性，再配合margin/padding 设置，以及与其它子控件的配合来达到我们想要的效果。

那在微信小程序的开发中，我们如何控制组件的位置呢？

小程序组件

小程序组件跟Android控件差不多意思，只是叫法有些许差异罢了，我们看一张小程序的官方组件表。

这里只截了部分内容，想看全部的移步官方文档：

https://developers.weixin.qq.com/miniprogram/dev/component/

这里的button，不就是Android里面的button 控件嘛，text组件不就是Android里面的TextView嘛，还有input可联想对应Android中的EditText，等等，还有其他控件，都可以跟Android中的控件作对比，很类似。所以从Android学习转学小程序开发还是很容易的。各位Android developer 放心吧！??

像Android开发，我们开发界面，会根据一个效果图，把控件放进xml布局文件里。在布局文件里进行各种设置，做出想要的效果。

小程序开发呢，是把组件放在wxml文件里，再配合着一个修饰组件样式wxss文件，来达到想要的的效果。

小程序组件也有自己的属性，这些属性值可以根据官方文档查询用处。比如button的属性就有部分如下：

我们可以看到，官方对其组件属性的介绍，除此之外在组件属性详情页底部还有示例代码，可以直接运行查看效果的。官方做的还挺人性化的。大家可以去看看：

button属性详情页：

https://developers.weixin.qq.com/miniprogram/dev/component/button.html

Position

接下来咱们就步如正题，看看如何控制小程序组件的位置。

以button组件为例，我们先在wxml文件中创建一个button 组件。代码如下：

效果如下：

这是默认效果。

设置组件的位置主要是使用position属性。

position的属性值有如下几种：

这里说个小技巧，在写小程序时，wxss文件中，如果忘记属性的话，可以点"空格键"，就会像上图那样列出可用的属性值，并且旁边会给出属性的解释。这对不了解属性的小伙伴还是很有帮助的。

我们position有九种值可选，每种分别代表什么意思呢？接着往下看。

-ms-page

该设置下，组件的位置是根据’absolute’模块来计算的。

示例代码：

效果：

上面的代码和效果图，已经表达的很明确了，我再补充一点，上面的代码用了style内联样式的方式来实现对组件样式的精确化描述，现实开发中用的更多的方式是配合着wxss文件，使用class类选择器来描述组件样式。因为使用内联样式的方式描述组件会造成居多的代码量，代码也不清晰。这里为了方便表述，所以选择内联样式的方式来表达。

如果是用类选择器的方式，那代码应该是这样：

.button-style{ background-color: darkorange; position: -ms-page; }

(Index.wxss文件)

<button class='.button-style'>使用类选择器</button>

(Index.wxml文件)

效果：

代码中rpx 就像是Android中的dp一样，都是距离单位。小程序编译后，rpx会做一次px换算。换算是以375个物理像素为基准，也就是在一个宽度为375物理像素的屏幕下，1rpx = 1px。

举个例子：iPhone6屏幕宽度为375px，共750个物理像素，那么1rpx = 375 / 750 px = 0.5px。

而Android呢，在160dpi下 1dp = 1px。

还有就是在设置组件的位置时，会常与left、top、right、bottom属性配合使用，表现效果上面也展示出来了。

absolute

该值表示组件的位置与大小，是由left、top、right、bottom属性决定的。

Code:

<button style='position:absolute'>absolute</button> <button style='position:absolute;left:20rpx;'>absolute+left 20rpx</button> <button style='position:absolute;left:20rpx;right:20rpx;'>absolute+left 20rpx+right 20rpx</button> <button style='position:absolute;left:20rpx;top:200rpx'>absolute+left 20rpx+top 200rpx</button> <button style='position:absolute;left:20rpx;top:200rpx;bottom:20rpx'>absolute+left 20rpx+top 200rpx+bottom 20rpx</button>

效果：

按理说应该是5个button，但是好像只有两个button，但是仔细看，应该能看出来，这些button出现了重合在一起的情况。还有，从效果上我们看的出来最后一个button的高度是由top、botton这两个属性值决定的。

换种表述让大家看的更清楚：

<button style='position:absolute'>absolute</button> <button style='position:absolute;left:20rpx;top:90rpx;'>absolute+left 20+top 90</button> <button style='position:absolute;left:20rpx;right:20rpx;top:180rpx;'>absolute+left 20+right 20+top 180</button> <button style='position:absolute;left:20rpx;top:270rpx;right:20rpx;bottom:100rpx'>absolute+left 20+top 270+right 20+bottom 100</button>

效果：

fixed

此效果和absolute效果类似

<button style='position:fixed'>fixed</button> <button style='position:fixed;left:20rpx;top:90rpx;'>fixed+left 20+top 90</button> <button style='position:fixed;left:20rpx;right:20rpx;top:180rpx;'>fixed+left 20+right 20+top 180</button> <button style='position:fixed;left:20rpx;top:270rpx;right:20rpx;bottom:100rpx'>fixed+left 20+top 270+right 20+bottom 100</button> <button style='position:fixed;left:90rpx'>fixed222+left 90</button>

效果：

inherit

从父元素继承 position 属性的值。

Code：

<view style='position:absolute;left:50rpx;top:200rpx;background-color:blue'> <button style='position:inherit'>inherit</button> </view>

效果：

Code：

<view style='position:absolute;left:50rpx;top:200rpx;background-color:blue'> <button>inherit</button> </view>

效果：

initial

initial 关键字用于设置 CSS 属性为它的默认值。

relative

生成相对定位的元素，相对于其正常位置进行定位。

Code :

<button style='position:relative'>relative</button> <button style='position:relative;left:20rpx;top:90rpx;'>relative+left 20+top 90</button> <button style='position:relative;right:20rpx;top:90rpx;'>relative+right 20+top 90</button> <button style='position:relative;left:20rpx;right:20rpx;top:180rpx;'>relative+left 20+right 20+top 180</button> <button style='position:relative;left:20rpx;top:270rpx;right:20rpx;bottom:10rpx'>relative+left 20+top 270+right 20+bottom 10</button>

效果：

static

left，top，right，bottom属性对其没用。

Code :

<button style='position:static;left:20rpx;top:90rpx;'>static+left 20+top 90</button>

效果：

sticky

用的比较少。

这篇文章解释的比较到位： https://www.cnblogs.com/coco1s/p/6402723.html

unset

名如其意，unset 关键字我们可以简单理解为不设置。其实，它是关键字 initial 和 inherit 的组合。

什么意思呢？也就是当我们给一个 CSS 属性设置了 unset 的话：

如果该属性是默认继承属性，该值等同于 inherit如果该属性是非继承属性，该值等同于 initial

Code :

<view style='position:absolute;left:20rpx'> <button style='position:unset;left:20rpx;top:90rpx;'>unset+left 20+top 90</button> </view>

效果：

结语

作者是做Android开发的，在学习小程序的过程中，会常常拿小程序里面的知识点和Android里面的知识点进行比较学习。微信的官方教程文档写的还是比较详细的，自学能力强的完全可以通过官方文档来学习。微信的wxss属性和前端的css属性很大部分是重合的，所以在遇到不了解的属性，可以上网查css的属性表。

上面介绍了position的9个属性值的作用，建议大家再亲手敲一遍，感受一下效果，会印象更深刻。熟悉了position属性的时候，结合left、top、right、bottom属性还有padding、margin系列属性，配合使用就可以做出想要的界面效果了。这里的padding和margin和Android中的一个意思。

关于position的介绍就说到这，大家有什么补充的可以留言区留言！咱们一起共同学习。后续作者还会不定期更新《Android开发人员学习小程序系列》。

原创不易，如果觉得文章对你有用的话，就点个赞/留言支持一下作者吧！！

参考链接

https://developers.weixin.qq.com/miniprogram/dev/

http://www.cnblogs.com/libin-1/p/6734751.html

https://developer.mozilla.org/zh-CN/docs/Web/CSS/unset

扫码体验小程序：微捷径

最新回复(0)