You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

能否在Xamarin Android的Activity中动态创建CardView?

在Xamarin Android中动态创建CardView实现单词卡方案

完全可行,动态创建CardView是处理不确定数量单词卡的最优方案,比静态XML布局更灵活,能适配任意数量的单词数据。以下是具体实现步骤:

1. 定义单词数据结构

先创建一个简单的类来存储西班牙语和英语单词对:

public class WordPair
{
    public string Spanish { get; set; }
    public string English { get; set; }
}

2. 准备布局容器

在Activity的XML布局中,先定义一个用来承载所有CardView的容器(推荐用垂直方向的LinearLayout):

<!-- MainActivity.axml -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/cards_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp"/>

3. 动态创建CardView并添加到容器

在Activity的代码中,遍历单词列表,逐个创建带正反切换功能的CardView:

protected override void OnCreate(Bundle savedInstanceState)
{
    base.OnCreate(savedInstanceState);
    SetContentView(Resource.Layout.Main);

    // 获取布局容器
    var cardsContainer = FindViewById<LinearLayout>(Resource.Id.cards_container);

    // 模拟单词数据(实际可从数据库、文件或网络读取)
    var wordPairs = new List<WordPair>
    {
        new WordPair { Spanish = "hola", English = "hello" },
        new WordPair { Spanish = "adiós", English = "goodbye" },
        new WordPair { Spanish = "gracias", English = "thank you" }
        // 可添加任意数量的单词对
    };

    // 遍历创建每个单词卡
    foreach (var pair in wordPairs)
    {
        // 创建CardView实例
        var cardView = new CardView(this);
        cardView.LayoutParameters = new LinearLayout.LayoutParams(
            ViewGroup.LayoutParams.MatchParent,
            ViewGroup.LayoutParams.WrapContent)
        {
            BottomMargin = 16 // 设置卡片间的垂直间距
        };
        cardView.SetCardElevation(8); // 添加阴影效果
        cardView.Radius = 8; // 设置圆角

        // 创建FrameLayout作为卡片内部容器,用于切换正反视图
        var cardContent = new FrameLayout(this);
        cardContent.LayoutParameters = new CardView.LayoutParams(
            ViewGroup.LayoutParams.MatchParent,
            ViewGroup.LayoutParams.MatchParent);
        cardContent.SetPadding(16, 16, 16, 16);

        // 创建正面视图(显示西班牙语)
        var frontView = new TextView(this);
        frontView.LayoutParameters = new FrameLayout.LayoutParams(
            ViewGroup.LayoutParams.MatchParent,
            ViewGroup.LayoutParams.WrapContent);
        frontView.TextSize = 24;
        frontView.Gravity = GravityFlags.Center;
        frontView.Text = pair.Spanish;

        // 创建反面视图(显示英语)
        var backView = new TextView(this);
        backView.LayoutParameters = new FrameLayout.LayoutParams(
            ViewGroup.LayoutParams.MatchParent,
            ViewGroup.LayoutParams.WrapContent);
        backView.TextSize = 24;
        backView.Gravity = GravityFlags.Center;
        backView.Text = pair.English;
        backView.Visibility = ViewStates.Gone; // 默认隐藏反面

        // 添加点击切换正反的逻辑
        bool isFrontShowing = true;
        cardView.Click += (s, e) =>
        {
            if (isFrontShowing)
            {
                frontView.Visibility = ViewStates.Gone;
                backView.Visibility = ViewStates.Visible;
            }
            else
            {
                frontView.Visibility = ViewStates.Visible;
                backView.Visibility = ViewStates.Gone;
            }
            isFrontShowing = !isFrontShowing;
        };

        // 将正反视图添加到容器,再挂载到CardView
        cardContent.AddView(frontView);
        cardContent.AddView(backView);
        cardView.AddView(cardContent);

        // 将CardView添加到页面容器
        cardsContainer.AddView(cardView);
    }
}

关于之前修改文本失败的说明

你之前修改CardView文本失败,大概率是因为布局层级引用错误(比如未正确找到目标TextView)。而动态创建每个独立的CardView,每个卡片的视图都是独立实例,不会出现引用混淆的问题,维护起来更清晰。

内容的提问来源于stack exchange,提问作者RealAdamZotof

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.28 05:03:16