如何在SwiftUI中基于绑定枚举更改View的样式?

时间:2020-06-09 21:25:49

标签: ios swift swiftui

我想在下面更改我的ListView( scrollDirection: Axis.horizontal, children: <Widget>[ Container( width: 160.0, color: Colors.red, ), Container( width: 160.0, color: Colors.blue, ), Container( width: 160.0, color: Colors.green, ), Container( width: 160.0, color: Colors.yellow, ), Container( width: 160.0, color: Colors.orange, ), ], ), 的样式:

查看

Material(
  color: Colors.transparent,
  child: InkWell(
    onTap: tapHandler,
    splashColor: splashColor,
    highlightColor: highlightColor,
    borderRadius: BorderRadius.circular(6),
    child: child,
  ),
)

基于我的模型文件中的Text

模型

@State var status = Status.offline

Button(action: { self.goOnline() }){
      Text("Offline")
          .statusButtonStyle(color: $status.color)
}.padding().background(Color.black).opacity(0.7).cornerRadius(40.0)

extension Text {
    func statusButtonStyle(color: Color = $status.color) -> Text {
        return self
            .foregroundColor(color)
    }
}

但是上面的代码造成2个错误,阻止了这种情况:

  1. 我的enum正在显示enum Status { case offline(color: Color = Color.black) case loading(color: Color = Color.gray) case online(color: Color = Color.green) }
  2. 我的extension正在显示Use of unresolved identifier '$status'

这些使我无法执行此绑定方法来更改enum的样式。

有什么主意我可以解决这个问题使其工作吗?

2 个答案:

答案 0 :(得分:2)

  1. 您的Text扩展名无法识别$status,因为它是在另一个作用域中定义的。
  2. 您的Status枚举无法识别Color,因为您可能未导入SwiftUI。

答案 1 :(得分:1)

此处是固定变体。使用Xcode 11.4 / iOS 13.4进行了测试

enum Status {
    case offline(color: Color = .black)
    case loading(color: Color = .gray)
    case online(color: Color = .green)

    var color: Color {
        switch self {
            case .offline(let color):
                return color
            case .loading(let color):
                return color
            case .online(let color):
                return color
        }
    }
}

struct StatusView: View {
    @State var status: Status = .offline()

    var body: some View {
        Button(action: { self.goOnline() }){
            Text("Offline")
                .statusButtonStyle(color: status.color)
        }.padding().background(Color.black).opacity(0.7).cornerRadius(40.0)
    }
}

extension Text {
    func statusButtonStyle(color: Color) -> Text {
        return self
            .foregroundColor(color)
    }
}