SwiftUI中如何实现Image与Text组件同行显示？

问题根源在于你使用了ZStack容器——它的作用是将子视图层叠叠加，自然会导致Text和Image重叠。要让两者在同一行横向排列，只需要把ZStack替换成HStack（横向线性布局容器）即可。

修改后的代码如下：

struct RestaurantOverlay: View {
    var amountOfStars: Int
    var body: some View {
        // 把ZStack换成HStack
        HStack(spacing: 6) { // spacing参数可调整两元素间距，按需修改
            Text("Burger")
                .font(.system(size: 17.5))
                .foregroundColor(.white)
                .fontWeight(.heavy)
            
            Image(systemName: "star.fill")
                .font(.system(size: 13))
                .foregroundColor(.white)
                .fontWeight(.medium)
        }
        .padding(10)
        .background(Color.black)
        .opacity(0.8)
        .cornerRadius(10.0)
    }
}

额外说明：如果需要更灵活的布局（比如让某一元素靠边对齐），可以给HStack添加alignment参数，或者结合Spacer()使用。比如想让Text靠左、Image靠右，只需在两者之间插入Spacer()即可。

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