Flutter：Row内三个Text组件的溢出与空间分配处理

直接通过flex布局结合文本截断样式就能实现需求，以下是完整代码示例：

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const LocationRow = ({ pickupLocation, destination }) => {
  return (
    <View style={styles.rowContainer}>
      <Text style={styles.dynamicText}>{pickupLocation}</Text>
      <Text style={styles.separator}>-</Text>
      <Text style={styles.dynamicText}>{destination}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  rowContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 12,
    paddingVertical: 8,
  },
  dynamicText: {
    flexShrink: 1,
    maxWidth: '50%',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
    fontSize: 14,
  },
  separator: {
    whiteSpace: 'nowrap',
    marginHorizontal: 6,
    fontSize: 14,
  },
});

export default LocationRow;

关键样式说明 #

• rowContainer：flexDirection: 'row'让子组件横向排列，alignItems: 'center'保证垂直居中，默认flex布局不换行，无需额外设置flexWrap
• dynamicText：
  • flexShrink: 1：文本过长时自动收缩，避免撑破容器
  • maxWidth: '50%'：限制文本最大宽度为父容器的一半，满足长文本的宽度限制
  • overflow: 'hidden' + textOverflow: 'ellipsis' + whiteSpace: 'nowrap'：组合实现单行文本超出部分省略显示
• separator：whiteSpace: 'nowrap'确保分隔符不会被拆分换行，marginHorizontal添加左右间距提升可读性

内容的提问来源于stack exchange，提问作者Nurullah Sadekin