React Native跨平台鸿蒙开发实战系列：输入表单如何适配任何机型，总是占据页面下部分

这里的flex:1相当于flex: 1 1 0%它是一个简写属性表示项目flex item在弹性容器flex container中如何伸缩。它相当于flex: 1 1 0%包含了三个子属性flex-grow 定义项目的放大比例默认为0即如果存在剩余空间也不放大。flex-shrink 定义了项目的缩小比例默认为1即如果空间不足该项目将缩小。flex-basis 定义在分配多余空间之前项目占据的主轴空间main size浏览器根据此属性计算主轴是否有多余空间默认值为 auto 即项目本身的大小。二、flex:11. 语法定义flex:1 是 flex-grow:1; flex-shrink:1; flex-basis:0% 的简写形式。2. 核心行为空间分配逻辑元素的初始尺寸由 flex-basis:0% 决定即默认不占用任何空间。剩余空间会根据 flex-grow 的权重比例分配。例如若两个元素均设置 flex:1则平分剩余空间。收缩能力当容器空间不足时元素会按 flex-shrink:1 的比例收缩但最小尺寸被限制为 0%可能导致内容截断。3. 典型场景等分布局多个子元素需均分容器宽度如导航栏按钮。内容无关的弹性区域元素尺寸完全由容器剩余空间决定忽略内容本身大小如侧边栏和主内容区。二、flex:auto1. 语法定义flex:auto 等价于 flex-grow:1; flex-shrink:1; flex-basis:auto。2. 核心行为空间分配逻辑元素的初始尺寸由 flex-basis:auto 决定即元素本身内容或显式设置的宽度/高度。剩余空间按 flex-grow 分配但需叠加初始尺寸。例如若元素 A 的 flex-basis 为 200px元素 B 的 flex-basis 为 100px剩余空间将按 200px:100px 的比例分配。收缩能力元素可收缩至小于初始尺寸但不会小于 min-content适合动态适配内容。3. 典型场景内容优先的弹性布局需根据内容动态调整如卡片布局中部分卡片需固定宽度另一部分自适应。混合尺寸分配需兼顾内容尺寸和剩余空间分配如表单输入框与按钮组合。flex:1的作用使用flex:1的作用是让项目能够自动填充剩余空间实现自适应布局。例如我们有一个水平排列的三个项目它们的内容长度不一样我们想让它们平均占据一行的空间就可以给它们都设置flex:1。flex:1 是 CSS 弹性盒布局中的一个常用属性简写用于让子元素自动填充容器的剩余空间。核心含义‌flex:1 等同于 flex-grow:1、flex-shrink:1 和 flex-basis:0%‌flex-grow:1‌当容器有剩余空间时该项目会放大以填满空间‌- flex-shrink:1‌当空间不足时该项目会按比例缩小‌- flex-basis:0%‌在分配空间前项目的基础尺寸为 0%‌主要作用‌‌‌- 自动分配空间‌根据容器剩余空间自动调整项目大小‌‌- 实现等高布局‌即使内容不同也能保证项目高度一致‌- ‌响应式适配‌轻松应对不同屏幕尺寸的布局需求‌典型应用场景‌.container{display:flex;}.sidebar{width:200px;/* 固定宽度 */}.main{flex:1;/* 自动填满剩余空间 */}#‌# 与 flex:auto 的区别‌flex:1空间不足时优先缩小自身尺寸flex:auto空间不足时优先保持内容完整显示‌防止无限撑大的技巧‌当 flex:1 的子项内容过多时可设置 max-height 和 overflow:auto 来显示滚动条而不是无限扩展。实用建议‌在构建侧边栏内容区布局时给固定宽高的侧边栏后直接为主内容区设置 flex:1即可实现完美的自适应填充效果。importReactfromreact;import{View,Text,Dimensions,StyleSheet,Image,TextInput,AppRegistry}fromreact-native;//获取屏幕的宽高constscreenWidthMath.round(Dimensions.get(window).width);constscreenHightMath.round(Dimensions.get(window).height);constAppStylesStyleSheet.create({wrap:{width:100%,height:screenHight,backgroundColor:#85BDFF},title:{width:100%,height:72,fontFamily:OPPOSans, OPPOSans,fontWeight:normal,paddingTop:50,fontSize:36,color:#304057,lineHeight:72,textAlign:center,fontStyle:normal},banner:{paddingTop:50,paddingRight:32,paddingLeft:32,},bannerItem:{paddingTop:10,display:flex,flexDirection:row,alignItems:center,justifyContent:center,width:50%,},loginBox:{width:100%,paddingTop:29,paddingLeft:20,paddingRight:20,borderTopRightRadius:30,borderTopLeftRadius:30,backgroundColor:#F2F8FF,flex:1}})functionApp(){return(View style{AppStyles.wrap}Text style{AppStyles.title}鸿蒙ReactNative系统/TextView style{AppStyles.banner}View style{{display:flex,flexDirection:row,justifyContent:space-between}}View style{AppStyles.bannerItem}Image style{{width:27,height:27}}source{require(./images/checked.png)}/ImageText style{{paddingLeft:4}}实时业绩便捷查询/Text/ViewView style{AppStyles.bannerItem}Image style{{width:27,height:27}}source{require(./images/checked.png)}/ImageText style{{paddingLeft:4}}订单状态轻松把控/Text/View/ViewView style{{display:flex,flexDirection:row,justifyContent:space-between}}View style{AppStyles.bannerItem}Image style{{width:27,height:27}}source{require(./images/checked.png)}/ImageText style{{paddingLeft:4}}宣传数据全程管理/Text/ViewView style{AppStyles.bannerItem}Image style{{width:27,height:27}}source{require(./images/checked.png)}/ImageText style{{paddingLeft:4}}海量素材一站转发/Text/View/View/ViewImage style{{width:289,height:182,display:flex,alignSelf:center,margin:20}}source{require(./images/login-bg.png)}/ImageView style{AppStyles.loginBox}TextInput style{{width:100%,height:48,borderRadius:10,backgroundColor:#FFFFFF,paddingLeft:16,paddingRight:16,fontSize:14,color:#304057}}placeholder请输入手机号/TextInput/View/View);}exportdefaultApp;解决了问题在Web开发初期开发者主要依赖float、position和inline-block实现页面布局垂直居中难题传统方案需通过margin: auto、transform或绝对定位配合top:50%等hack实现代码冗余且维护性差。欢迎大家加入开源鸿蒙跨平台开发者社区一起共建开源鸿蒙跨平台生态。