SwiftUI How to add done button to picker

Question

Ive make a mini app with just a button and a picker and the idea is to have a done button above the picker so once ive chosen a value i can press done and the picker will close.

I am aware if you click the "click me" button it will open and if you click it again close the picker but im looking for a button that appears with the picker and disapears with the clicker when clicked.

Almost like a toolbar above the picker with a done button

    @State var expand = false
    @State var list = ["value1", "value2", "value3"]
    @State var index = 0

    var body: some View {
       VStack {
            Button(action: {
                self.expand.toggle()
            }) {
                Text("Click me \(list[index])")
            }
            if expand {
                Picker(selection: $list, label: EmptyView()) {
                    ForEach(0 ..< list.count) {
                        Text(self.list[$0]).tag($0)
                    }
                }.labelsHidden()
            }

        }

The third image is what im trying to accomplish and the first 2 are what ive currently got

Thank you for your help

Answer 1

Add a Button to the if-clause:

if expand {
    VStack{
        Button(action:{self.expand = false}){
            Text("Done")
        }
        Picker(selection: $list, label: EmptyView()) {
            ForEach(0 ..< list.count) {
                Text(self.list[$0]).tag($0)
            }
        }.labelsHidden()
    }
}