如何通过点击按钮实现动态创建的StackLayout显示与隐藏？

问题分析 #

你当前的代码中，触发按钮和要隐藏的评论区域处于同一个容器内，直接隐藏整个容器会导致按钮也被隐藏，不符合交互逻辑。需要将按钮与目标隐藏区域分离，单独控制目标区域的显示状态。

修改后的代码实现 #

布局调整与事件绑定

StackLayout commentStack = new();

var button = new Button();
button.Text = "+ Add a Comment";
button.WidthRequest = 100;

// 创建单独的容器存放需要隐藏的评论输入区域
var commentInputArea = new StackLayout();
commentInputArea.IsVisible = false; // 初始状态设为隐藏
commentInputArea.Margin = new Thickness(0, 20, 0, 0);

var commentlabel = new Label();
commentlabel.Text = Translator.Section_Comments;
commentlabel.FontSize = 17;
commentlabel.FontAttributes = FontAttributes.Bold;

var frame = new Frame();
var editor = new Editor();

frame.BorderColor = Color.LightGray;
frame.Padding = 1;
frame.HasShadow = false;

editor.IsEnabled = !this.IsReadOnly;
editor.FontSize = 17;
editor.HeightRequest = 150;

editor.TextChanged += (sender, e) => OnEditorCommentTextChanged(question, editor.Text);

frame.Content = editor;

// 将评论标题和输入框加入隐藏容器
commentInputArea.Children.Add(commentlabel);
commentInputArea.Children.Add(frame);

var stackGrid = new Grid()
{
    RowDefinitions = new()
    {
        new RowDefinition() { Height = GridLength.Auto },
        new RowDefinition() { Height = GridLength.Auto },
    },
    ColumnDefinitions = new()
    {
        new ColumnDefinition(),
    }
};

stackGrid.Children.Add(button);
stackGrid.Children.Add(commentInputArea, 0, 1);

commentStack.Children.Add(stackGrid);
stack.Children.Add(commentStack);
this.Children.Add(stack);

// 绑定点击事件，传入按钮和目标隐藏容器
button.Clicked += (sender, e) => OnButtonClicked(button, commentInputArea);

点击事件处理逻辑

private void OnButtonClicked(Button toggleButton, StackLayout targetLayout)
{
    // 切换目标布局的显示状态
    targetLayout.IsVisible = !targetLayout.IsVisible;
    // 根据状态更新按钮文本
    toggleButton.Text = targetLayout.IsVisible ? "- Hide Comment" : "+ Add a Comment";
}

关键说明 #

• 将需要隐藏的评论标题和输入框封装到单独的StackLayout中，避免触发按钮被一并隐藏。
• 通过切换容器的IsVisible属性实现显示/隐藏，同时更新按钮文本，让用户清晰感知当前交互状态。
• 调整Grid的行定义为GridLength.Auto，让布局根据内容自动适配高度，更贴合动态显示的需求。

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