代码拉取完成,页面将自动刷新
同步操作将从 OpenHarmony/docs 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
说明:
- 仅当父组件是Flex组件时生效。
@Entry
@Component
struct FlexExample {
build() {
Column({ space: 5 }) {
Text('flexBasis').fontSize(9).fontColor(0xCCCCCC).width('90%')
// 基于主轴基准尺寸
// flexBasis()值可以是'auto'(默认值)元素本来的大小 ,如果是数字则类似于.width()/.height() ,基于主轴
Flex() {
Text('flexBasis(100)')
.flexBasis('100').height(100).lineHeight(70)
.backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
Text('flexBasis("auto")')
.flexBasis('auto').width('60%').height(100).lineHeight(70)
.backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
}.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
Text('flexGrow').fontSize(9).fontColor(0xCCCCCC).width('90%')
// 剩余空间所占比例
// flexGrow()剩余空间分配给该元素的比例
Flex() {
Text('flexGrow(2)')
.flexGrow(2).height(100).lineHeight(70)
.backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
Text('flexGrow(1)')
.flexGrow(1).height(100).lineHeight(70)
.backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
}.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
Text('flexShrink').fontSize(9).fontColor(0xCCCCCC).width('90%')
// flexShrink()此属性所在的组件的比例
// text1比例是0,其他都是默认值1,放不下时直接等比例缩放后两个,第一个不缩放
Flex({ direction: FlexDirection.Row }) {
Text('flexShrink(0)')
.flexShrink(0).width('50%').height(100).lineHeight(70)
.backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
Text('no flexShrink')
.width('40%').height(100).lineHeight(70).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
Text('flexShrink(2)')
.flexShrink(2).width('40%').height(100) .lineHeight(70)
.backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
}.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
Text('alignSelf').fontSize(9).fontColor(0xCCCCCC).width('90%')
// alignSelf()覆盖Flex布局容器中alignItems默认配置
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
Text('no alignSelf,height:80').width('33%').height(80)
.backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
Text('alignSelf stretch')
.alignSelf(ItemAlign.Stretch).width('33%').height(80).lineHeight(70)
.backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
Text('no alignSelf,height:100').width('34%').height(100)
.backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
}.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
}.width('100%').margin({ top: 5 })
}
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。