如何在Xcode的Storyboard UI中为标题文本设置约束使其尺寸与父视图相对应

以下为不同技术栈下的常用实现方式：

iOS 实现方案 #

• 方案1：使用系统自动适配属性
  先给标题UILabel添加和父视图成比例的宽/高约束，再开启字号适配属性即可，无需手动计算字号：

  let titleLabel = UILabel()
  titleLabel.text = "应用标题"
  titleLabel.numberOfLines = 1
  // 开启字号适配
  titleLabel.adjustsFontSizeToFitWidth = true
  // 设置允许的最小缩放比例，可按需调整
  titleLabel.minimumScaleFactor = 0.5
  
  // 添加约束：标签宽度为父视图宽度的80%，居中显示
  titleLabel.translatesAutoresizingMaskIntoConstraints = false
  NSLayoutConstraint.activate([
      titleLabel.centerXAnchor.constraint(equalTo: superview.centerXAnchor),
      titleLabel.centerYAnchor.constraint(equalTo: superview.centerYAnchor),
      titleLabel.widthAnchor.constraint(equalTo: superview.widthAnchor, multiplier: 0.8)
  ])
  

• 方案2：手动按比例计算字号
  需要精准控制字号和父视图的比例时，在父视图尺寸变化的回调中重新计算字号即可：

  override func viewDidLayoutSubviews() {
      super.viewDidLayoutSubviews()
      // 示例规则：字号为父视图宽度的10%，可按需调整比例
      let targetFontSize = superview.bounds.width * 0.1
      titleLabel.font = UIFont.systemFont(ofSize: targetFontSize, weight: .bold)
  }
  

Android 实现方案 #

• 方案1：XML配置自动适配
  直接给TextView配置系统提供的自动字号属性即可：

  <TextView
      android:id="@+id/title_text"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:maxLines="1"
      app:autoSizeTextType="uniform"
      app:autoSizeMinTextSize="12sp"
      app:autoSizeMaxTextSize="100sp"
      app:autoSizeStepGranularity="2sp" />
  

• 方案2：动态计算字号
  监听父视图尺寸变化，按自定义比例计算字号：

  titleText.viewTreeObserver.addOnGlobalLayoutListener {
      val parentWidth = (titleText.parent as View).width
      // 示例规则：字号为父视图宽度的10%
      val fontSize = parentWidth * 0.1f
      titleText.textSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, fontSize, resources.displayMetrics)
  }
  

Flutter 实现方案 #

• 方案1：用FittedBox自动适配
  用FittedBox包裹文本组件，会自动适配父容器尺寸调整字号：

  Container(
    // 父容器宽度为屏幕宽度的80%，可按需调整
    width: MediaQuery.of(context).size.width * 0.8,
    child: FittedBox(
      fit: BoxFit.contain,
      child: Text(
        '应用标题',
        maxLines: 1,
      ),
    ),
  )
  

• 方案2：手动按比例计算字号
  通过屏幕尺寸直接计算目标字号：

  Text(
    '应用标题',
    style: TextStyle(
      // 示例规则：字号为屏幕宽度的10%
      fontSize: MediaQuery.of(context).size.width * 0.1,
    ),
  )
  

内容的提问来源于stack exchange，提问作者Abhyas Mall