本文共 3195 字，大约阅读时间需要 10 分钟。
项目中我们经常会遇到组件左右两端展示的需求，实现的方法有很多种，
今天简述下以下两种方法：
A:子组件使用flex:1（自动填充）
优势：
设置flex:1的组件会优先展示兄弟组件，然后自己才会填充父组件剩余部分。
假如设置左端组件flex:1，那么会优先展示右端组件，然后左端组件才会填充父组件剩余部分。
劣势：
需要设置子组件
子组件：
设置flex:1的子组件会拉伸填充满父组件剩余部分
适用场景：
全场景通用
一端优先展示，另一端动态变化的（文字过长且单行展示的）亦可正常展示
B:父组件使用justifyContent:'space-between'（两端对齐）
优势：
使用简单，不需要操纵子组件
劣势：
子组件优先级是一样的，不能满足一端优先显示的场景
假如一端文本过长且一行展示时，另一端会被挤出父组件，导致显示异常，
假如没有限制行数，是不会出现展示问题的
子组件：
按实际内容展示不会拉伸填充父组件剩余部分
适用场景：
左右两端有限显示，
不涉及一端文本过长且要单行显示的。
综上所述：
两种方法各有千秋，具体场景，具体使用，flex:1更具备通用性
下面是简单的示例：
A:子组件使用flex:1
效果图：
通过视图结构层次，我们发现组件完全按照我们的意图显示。
视图结构：
话不多说，直接上代码：
左边文本右端组件
我是标题 {/* 展开收起 */}{ let open = this.state.openflag this.setState({ openflag: !open }) }}> {this.showTitle()} {this.showImg()}
item_top_bg: { borderRadius: 8, marginHorizontal: 10, marginBottom: 10, paddingHorizontal: 15, paddingVertical: 20, flexDirection: 'row', alignItems: 'center', backgroundColor: '#FFFFFF', }, item_tab: { flex: 1, fontSize: DeviceHelp.fontSize(17), fontWeight: DeviceHelp.fontBold, color: '#3480FF', }, item_top_btn: { alignItems: 'center', flexDirection: 'row', }, 左边文本右边文本
{/* 左右 */} {/* 分割线 */} 左 右 {/* 左右 */} 我是左边 我是右边
item_sub_bg: { borderRadius: 5, borderWidth: 1, borderColor: '#B8D2FF5C', backgroundColor: '#FCFDFF', paddingHorizontal: 15, paddingVertical: 17, }, item_title_bg: { alignItems: 'center', flexDirection: 'row', }, item_left: { fontSize: DeviceHelp.fontSize(14), color: '#666666', flex: 1, }, item_right: { fontSize: DeviceHelp.fontSize(14), color: '#333333', }, item_line: { marginVertical: 17, height: 0.5, backgroundColor: '#EBEBEB', }, B：父组件使用justifyContent:'space-between'
结构图：
代码变动如下：
两者都是子组件注释// flex:1,父组件增加justifyContent:'space-between',
左边文本右边组件：
item_top_bg: { borderRadius: 8, marginHorizontal: 10, marginBottom: 10, paddingHorizontal: 15, paddingVertical: 20, flexDirection: 'row', alignItems: 'center', backgroundColor: '#FFFFFF', justifyContent:'space-between', }, item_tab: { // flex:1, fontSize: DeviceHelp.fontSize(17), fontWeight: DeviceHelp.fontBold, color: '#3480FF', }, 左边文本右边文本
item_title_bg: { alignItems: 'center', flexDirection: 'row', justifyContent:'space-between', }, item_left: { // flex:1, fontSize: DeviceHelp.fontSize(14), color: '#666666', },
转载地址：https://www.cnblogs.com/lijianyi/p/14849964.html 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！
发表评论
最新留言
关于作者
