技术问询：如何用Xamarin从JSON动态创建UI？是否开发过这类应用？

Got it, let's walk through how to build this Xamarin app that handles your dynamic prototype rendering and local storage needs. Here's a practical, step-by-step approach:

First, you'll need to standardize the JSON output from your web app so the Xamarin side can reliably parse it. A solid structure should include metadata for each control and the overall prototype. Here's an example:

{
  "PrototypeName": "LoginScreen",
  "Controls": [
    {
      "Type": "Label",
      "Id": "lblTitle",
      "Position": { "X": 50, "Y": 20, "Width": 300, "Height": 40 },
      "Content": "Welcome Back",
      "Properties": { "FontSize": 24, "TextColor": "#2c3e50", "HorizontalTextAlignment": "Center" }
    },
    {
      "Type": "TextBox",
      "Id": "txtUsername",
      "Position": { "X": 50, "Y": 80, "Width": 300, "Height": 40 },
      "Content": "",
      "Properties": { "Placeholder": "Enter username", "Keyboard": "Text" }
    }
  ]
}

This structure includes control type, positioning details, content, and styling properties—all the info Xamarin needs to build the view accurately.

Use a JSON serializer like System.Text.Json (built-in) or Newtonsoft.Json to deserialize the JSON into C# objects. Then, map each control type to a Xamarin.Forms view and add it to an AbsoluteLayout (perfect for precise positioning).

Here's a quick, reusable code snippet:

using System.Text.Json;
using Xamarin.Forms;

public async Task<AbsoluteLayout> BuildPrototypeFromJson(string jsonContent)
{
    var prototype = JsonSerializer.Deserialize<PrototypeModel>(jsonContent);
    var layout = new AbsoluteLayout();

    foreach (var control in prototype.Controls)
    {
        View view = null;
        switch (control.Type.ToLower())
        {
            case "label":
                view = new Label
                {
                    Text = control.Content,
                    FontSize = control.Properties.FontSize,
                    TextColor = Color.FromHex(control.Properties.TextColor),
                    HorizontalTextAlignment = control.Properties.HorizontalTextAlignment switch
                    {
                        "Center" => TextAlignment.Center,
                        "Start" => TextAlignment.Start,
                        _ => TextAlignment.Default
                    }
                };
                break;
            case "textbox":
                view = new Entry
                {
                    Placeholder = control.Properties.Placeholder,
                    Keyboard = control.Properties.Keyboard switch
                    {
                        "Text" => Keyboard.Text,
                        "Numeric" => Keyboard.Numeric,
                        _ => Keyboard.Default
                    }
                };
                break;
            // Add more control types (Button, Image, Switch) as your web app supports them
        }

        if (view != null)
        {
            AbsoluteLayout.SetLayoutBounds(view, new Rectangle(
                control.Position.X, 
                control.Position.Y, 
                control.Position.Width, 
                control.Position.Height));
            AbsoluteLayout.SetLayoutFlags(view, AbsoluteLayoutFlags.None);
            layout.Children.Add(view);
        }
    }

    return layout;
}

// Corresponding model classes to match the JSON structure
public class PrototypeModel
{
    public string PrototypeName { get; set; }
    public List<ControlModel> Controls { get; set; }
}

public class ControlModel
{
    public string Type { get; set; }
    public string Id { get; set; }
    public PositionModel Position { get; set; }
    public string Content { get; set; }
    public ControlProperties Properties { get; set; }
}

public class PositionModel
{
    public double X { get; set; }
    public double Y { get; set; }
    public double Width { get; set; }
    public double Height { get; set; }
}

public class ControlProperties
{
    public int FontSize { get; set; }
    public string TextColor { get; set; }
    public string HorizontalTextAlignment { get; set; }
    public string Placeholder { get; set; }
    public string Keyboard { get; set; }
    // Add more properties (like background color, border) as needed
}

You can then add the returned AbsoluteLayout directly to your page's content.

Option 1: Simple File Storage #

Use Xamarin.Essentials to save/load prototype JSON to a local app directory:

using Xamarin.Essentials;

public async Task SavePrototypeToFile(string prototypeName, string jsonContent)
{
    var fileName = $"{prototypeName}.json";
    var filePath = Path.Combine(FileSystem.AppDataDirectory, fileName);
    await File.WriteAllTextAsync(filePath, jsonContent);
}

public async Task<string> LoadPrototypeFromFile(string prototypeName)
{
    var fileName = $"{prototypeName}.json";
    var filePath = Path.Combine(FileSystem.AppDataDirectory, fileName);
    return File.Exists(filePath) ? await File.ReadAllTextAsync(filePath) : null;
}

Option 2: SQLite for Structured Storage #

If you need to track multiple prototypes with metadata (like last modified date), use the sqlite-net-pcl package. First, define a database entity:

using SQLite;

[Table("Prototypes")]
public class StoredPrototype
{
    [PrimaryKey, AutoIncrement]
    public int Id { get; set; }
    public string Name { get; set; }
    public string JsonContent { get; set; }
    public DateTime LastModified { get; set; }
}

Then implement basic CRUD operations:

public class PrototypeDatabase
{
    private readonly SQLiteAsyncConnection _db;

    public PrototypeDatabase(string dbPath)
    {
        _db = new SQLiteAsyncConnection(dbPath);
        _db.CreateTableAsync<StoredPrototype>().Wait();
    }

    public Task<List<StoredPrototype>> GetAllPrototypesAsync()
    {
        return _db.Table<StoredPrototype>().ToListAsync();
    }

    public Task<int> SavePrototypeAsync(StoredPrototype prototype)
    {
        if (prototype.Id != 0)
        {
            prototype.LastModified = DateTime.Now;
            return _db.UpdateAsync(prototype);
        }
        else
        {
            prototype.LastModified = DateTime.Now;
            return _db.InsertAsync(prototype);
        }
    }
}

For manual sync, add simple UI controls (like "Export" and "Import" buttons) to trigger these actions:

• Export: Let users save the prototype JSON to a shared device location (e.g., Downloads folder) using Xamarin.Essentials.FilePicker.
• Import: Let users select a JSON file from their device, parse it, and save it to your local storage (file or SQLite).

Example export code:

public async Task ExportPrototypeAsync(string jsonContent, string prototypeName)
{
    var fileSaveResult = await FilePicker.PickSaveFileAsync(new PickOptions
    {
        SuggestedFileName = $"{prototypeName}.json",
        FileTypes = new FilePickerFileType(new Dictionary<DevicePlatform, IEnumerable<string>>
        {
            { DevicePlatform.Android, new[] { "application/json" } },
            { DevicePlatform.iOS, new[] { "public.json" } }
        })
    });

    if (fileSaveResult != null)
    {
        using var stream = await fileSaveResult.OpenWriteAsync();
        using var writer = new StreamWriter(stream);
        await writer.WriteAsync(jsonContent);
    }
}

内容的提问来源于stack exchange，提问作者Gold.strike