Xamarin使用CommunityToolkit弹窗如何返回值并在主页面动态添加内容

1. 修改Popup页面XAML，给时间选择器加命名标识 #

打开popup.xaml，给两个TimePicker控件添加x:Name属性，方便后台获取选中的时间：

<TimePicker x:Name="FromTimePicker" HorizontalOptions="Center" Time="00:00" />
<Label Text="To Time" Padding="5,5,0,0" TextColor="Black"
    HorizontalTextAlignment="Start" />
<TimePicker x:Name="ToTimePicker" HorizontalOptions="Center"/>

2. 定义活动记录数据类（可选，方便数据传递） #

在项目中新建ActivityRecord.cs类，用来统一传递弹窗返回的三个字段：

namespace MReport
{
    public class ActivityRecord
    {
        public TimeSpan FromTime { get; set; }
        public TimeSpan ToTime { get; set; }
        public string ActivityContent { get; set; }
    }
}

3. 编写ADD按钮点击逻辑 #

打开popup.xaml.cs，补充Button_Clicked_1方法的代码，获取输入值后关闭弹窗并返回数据：

private void Button_Clicked_1(object sender, EventArgs e)
{
    // 可自行添加输入校验逻辑，比如活动内容为空时弹出提示
    var returnData = new ActivityRecord
    {
        FromTime = FromTimePicker.Time,
        ToTime = ToTimePicker.Time,
        ActivityContent = editor_value.Text?.Trim() ?? string.Empty
    };
    // 关闭弹窗并携带返回数据
    Dismiss(returnData);
}

4. 修改主页面逻辑，接收返回值并动态生成展示卡片 #

第一步：给主页面的容器加命名 #

打开TabbedPage的XAML文件，给ScrollView内部的StackLayout添加x:Name，方便后续动态添加子控件：

<ScrollView>
    <StackLayout x:Name="ActivityContainer">
        <Label x:Name="lbl01" />
    </StackLayout>
</ScrollView>

第二步：修改弹窗触发方法，接收返回值 #

打开TabbedPage.xaml.cs，修改Button_Clicked方法为异步方法，接收弹窗返回的数据并生成Frame卡片：

private async void Button_Clicked(object sender, EventArgs e)
{
    // 使用异步弹出方法接收弹窗返回结果
    var popupResult = await Navigation.ShowPopupAsync(new popup01());
    
    // 仅处理点击ADD按钮返回的有效活动数据
    if (popupResult is ActivityRecord record && !string.IsNullOrEmpty(record.ActivityContent))
    {
        // 生成自适应高度的展示Frame
        var displayFrame = new Frame
        {
            CornerRadius = 8,
            Margin = new Thickness(10, 6),
            HasShadow = true,
            BackgroundColor = Color.White
        };

        // 组装Frame内部的内容布局
        var contentStack = new StackLayout { Spacing = 5 };
        contentStack.Children.Add(new Label
        {
            Text = $"时间：{record.FromTime.ToString(@"hh\:mm")} ~ {record.ToTime.ToString(@"hh\:mm")}",
            FontAttributes = FontAttributes.Bold,
            TextColor = Color.Black
        });
        contentStack.Children.Add(new Label
        {
            Text = $"活动内容：{record.ActivityContent}",
            TextColor = Color.DimGray,
            LineBreakMode = LineBreakMode.WordWrap
        });

        displayFrame.Content = contentStack;
        // 将卡片添加到主页面容器
        ActivityContainer.Children.Add(displayFrame);
    }
}

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