冰狐智能辅助
首页
文档&下载
移动端
微服务
社区
码农教程
管理中心
关于我们
登录/注册
弹性布局(flexbox)

flexbox布局

flexbox布局。 // 使用flexbox布局实现radio自动换行 <template> <flexbox width="matchParent" flexWrap="wrap"> <radio id="demo1" text="苹果" onChecked="cbChecked"/> <radio id="demo2" text="橘子" onChecked="cbChecked"/> <radio id="demo3" text="香蕉" onChecked="cbChecked"/> <radio id="demo1" text="苹果1" onChecked="cbChecked"/> <radio id="demo2" text="橘子1" onChecked="cbChecked"/> <radio id="demo3" text="香蕉1" onChecked="cbChecked"/> <radio id="demo1" text="苹果2" onChecked="cbChecked"/> <radio id="demo2" text="橘子2" onChecked="cbChecked"/> <radio id="demo3" text="香蕉2" onChecked="cbChecked"/> </flexbox> </template> var selectRB = null function main() { // 创建并显示ui setupUI(); } function cbChecked(rb, checked) { console.log(rb.text, ' value:' + checked); if (rb == selectRB) { rb.checked(false); selectRB = null; } else { if (null != selectRB) { selectRB.checked(false); } selectRB = rb; } }

属性-flexDirection

主轴方向，支持row,row_reverse,column,column_reverse <template> <flexbox flexDirection="row"> <text text="控件"/> <button text="确认"/> </flexbox> </template>

属性-flexWrap

换行方式，支持wrap,nowrap,wrap_reverse <template> <flexbox flexWrap="wrap"> <text text="控件"/> <button text="确认"/> </flexbox> </template>

属性-justifyContent

主轴对齐方式，支持flex_start, flex_end, center, space_between, space_around, space_evenly <template> <flexbox justifyContent="flex_end"> <text text="控件"/> <button text="确认"/> </flexbox> </template>

属性-alignItems

主轴对齐方式，支持flex_start, flex_end, center, baseline, stretch <template> <flexbox alignItems="flex_end"> <text text="控件"/> <button text="确认"/> </flexbox> </template>

属性-alignContent

多行内容在交叉轴上的对齐方式，支持flex_start, flex_end, space_between, space_around, stretch <template> <flexbox alignContent="flex_end"> <text text="控件"/> <button text="确认"/> </flexbox> </template>

子控件属性-layout_order

布局顺序 (值越小越靠前)，integer值。 <template> <flexbox> <text text="控件" layout_order="1"/> <button text="确认"/> </flexbox> </template>

子控件属性-layout_flexGrow

分配剩余空间的比例 (默认0)， float值。 <template> <flexbox> <text text="控件" layout_flexGrow="1"/> <button text="确认"/> </flexbox> </template>

子控件属性-layout_flexShrink

空间不足时的收缩比例 (默认1)，float值。 <template> <flexbox> <text text="控件" layout_flexShrink="1"/> <button text="确认"/> </flexbox> </template>

子控件属性-layout_alignSelf

单独设置子项在交叉轴的对齐方式，integer值。 <template> <flexbox > <text text="控件" layout_alignSelf="2"/> <button text="确认"/> </flexbox> </template>

子控件属性-layout_flexBasisPercent

初始主轴尺寸的百分比，float值。 <template> <flexbox> <text text="控件" layout_flexBasisPercent="0.2"/> <button text="确认"/> </flexbox> </template>

子控件属性-layout_wrapBefore

是否强制在该子项前换行，boolean值。 <template> <flexbox> <text text="控件" layout_wrapBefore="true"/> <button text="确认"/> </flexbox> </template>