Question

单击按钮，我希望能够在背景模糊的当前视图（所有配置文件的列表）的顶部显示一个视图（带有配置文件信息的圆角矩形）。

以下是我要尝试的

这是我目前拥有的

<DataTemplate x:Key="HomingTemplate">

    <ListView Grid.Row="1" Grid.Column="1" 
                x:Name="lstHomingItemsTemplate"
                HorizontalAlignment="Stretch" 
                VerticalAlignment="Stretch" 
                ItemsSource="{Binding HomingItems}" Margin="0,20" 
                SelectionMode="None">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid HorizontalAlignment="Stretch">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="180"/>
                        <ColumnDefinition Width="180"/>
                        <ColumnDefinition Width="180"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" Text="{Binding Key}" FontSize="{StaticResource FontSizeMedium}" TextWrapping="Wrap"/>
                    <TextBlock Grid.Column="1"  Text="{Binding Value}" FontSize="{StaticResource FontSizeMedium}" TextWrapping="Wrap"/>
                    <Button Grid.Column="2" Margin="20,0,0,0" 
                            Command="{Binding Path=DataContext.HomingSectionAcceptButtonCommand,ElementName=lstHomingItemsTemplate}"
                            CommandParameter="{Binding Key}">
                        <Button.Content>
                            <SymbolIcon Symbol="Accept" 
                        HorizontalAlignment="Center" 
                        VerticalAlignment="Stretch"/>
                        </Button.Content>
                    </Button>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

非常感谢您提供任何帮助

Answer 1

您必须执行类似的操作

import SwiftUI

struct ProfileList: View {
var list: [String]

@State var displayItem: Int = -1

var body: some View {
    ZStack{
        VStack (spacing: 20){
            Text("Profile List").fontWeight(.bold)
                .padding(.bottom, 80)

            ForEach(0 ..< list.count) {number in
                Button(action: {self.displayItem = number}) { Text(self.list[number]) }
            }
        }


        if (displayItem != -1) {
            ProfileInfo(text: list[self.displayItem], displayItem: $displayItem)
                .padding(.top, -350)
        }
        Spacer()
    }.animation(.easeInOut)
  }
}

struct ProfileInfo: View {
var text: String
@Binding var displayItem:Int

var body: some View {
    ZStack{
        Rectangle()
        .fill(Color.gray)
        .opacity(0.5)

        VStack {
            Spacer()
            HStack {
                VStack(spacing: 20) {
                    Text(text).fontWeight(.bold).padding(.all, 20)

                    Text("Name")
                    Text("Age")
                    Text("Profession")
                    Text("Interest")
                }
            }
            .frame(minWidth: 300, idealWidth: 300, maxWidth: 300, minHeight: 250, idealHeight: 100, maxHeight: 250, alignment: .top).fixedSize(horizontal: true, vertical: true)
            .background(RoundedRectangle(cornerRadius: 27).fill(Color.white.opacity(1)))
            .overlay(RoundedRectangle(cornerRadius: 27).stroke(Color.black, lineWidth: 1))
            Spacer()
        }
    }.onTapGesture {
        self.displayItem = -1
    }
  }
}

struct ProfileList_Previews: PreviewProvider {
static var previews: some View {
    ProfileList(list: ["ABC", "DEF", "GHI", "JKL", "MNO", "PQR"])
  }
}

SwiftUI：如何在背景模糊的当前视图之上以弹出形式显示视图？

1 个答案: