SwiftUI中如何为自定义View设置不同的指定尺寸？

你目前的问题是CircleView内部硬编码了固定frame，导致所有实例尺寸完全一致。SwiftUI的布局逻辑推荐父视图决定子视图尺寸，我们只需要去掉内部硬编码的尺寸约束，让CircleView可以响应外部的布局调整即可。

方案1：让自定义View自适应外部布局（更推荐） #

这个方案不需要额外传参，完全符合SwiftUI的布局规则，调整起来最灵活。

第一步修改CircleView #

struct CircleView: View {
  var body: some View {
    ZStack{
        // 去掉内部硬编码的frame，让圆形自动填充ZStack的可用空间
        Circle()
            .fill(Color.blue)
        Text("VIEW")
            .font(.largeTitle)
            .scaledToFit() // 文字自动适配尺寸
            .minimumScaleFactor(0.3) // 最小缩放比例，避免小尺寸下文字消失
            .foregroundColor(.white)
            .padding(15) // 文字和圆形边缘保留边距
    }
  }
}

第二步在列表中使用小尺寸CircleView #

修改ContentView中的调用代码，直接给CircleView加frame即可：

struct ContentView: View {
    var body: some View {
        
        NavigationView {
            List{
                NavigationLink(destination: DetailsView()) {
                  HStack{
                    Text("Hello")
                    Spacer()
                    // 外部指定小尺寸
                    CircleView()
                        .frame(width: 40, height: 40)
                  }
                }.navigationTitle("Home")     
            }
        }
    }
}

第三步在详情页中使用占满全宽的CircleView #

修改DetailsView的调用代码，指定最大宽度，保持正方形比例即可：

struct DetailsView: View {
    var body: some View {
        VStack{
            Text("Hello, World!")
                .padding(10)
            // 占满父视图的全部可用宽度，保持1:1比例保证是正圆
            CircleView()
                .frame(maxWidth: .infinity)
                .aspectRatio(1, contentMode: .fit)
                .padding(.horizontal, 20) // 可选：左右留边距，不会贴到屏幕边缘
        }
    }
}

方案2：参数化配置固定尺寸 #

如果需要给CircleView设置默认尺寸，也可以把直径做成可配置的属性：

struct CircleView: View {
  // 新增直径属性，默认值为nil代表自适应外部尺寸
  var diameter: CGFloat?
  var body: some View {
    ZStack{
        Circle()
            .fill(Color.blue)
        Text("VIEW")
            .font(.largeTitle)
            .scaledToFit()
            .minimumScaleFactor(0.3)
            .foregroundColor(.white)
            .padding(15)
    }
    .frame(width: diameter, height: diameter)
  }
}

使用的时候直接传参即可：

• 列表小尺寸：CircleView(diameter: 40)
• 详情页自适应全宽：CircleView().frame(maxWidth: .infinity).aspectRatio(1, contentMode: .fit)

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