Stacklayout对齐的设计问题

Question

我想在我的 xamarin.forms 应用程序中有一个带有开关控制的列表视图。我使用堆栈布局来对齐列表视图的内容。我想要在每个列表项上显示一个图像、2 个标签和一个开关控件。我无法按照我想要的方式将其全部对齐。

我附上了 4 张图片。图片 1 显示了所需的设计，图片 2 是 Android 上的输出，图片 3 是我得到的 Windows 设备上的输出，图片 4 是文件夹结构。

这是我正在使用的 stacklayout 结构。我也尝试过使用 RelativeLayout 但似乎也不起作用。

Label name = new Label();
name.SetBinding(Label.TextProperty, new Binding("Item.Name"));
name.HorizontalOptions = LayoutOptions.Start;
name.VerticalOptions = LayoutOptions.Center;

Label date = new Label();
date.SetBinding(Label.TextProperty, new Binding("Item.Date"));
date.HorizontalOptions = LayoutOptions.Start;
date.VerticalOptions = LayoutOptions.Center;

Image img = new Image();
img.Source = Device.OnPlatform(
iOS: ImageSource.FromFile("Images/img.png"),
Android: ImageSource.FromFile("Images/img.png"),
WinPhone: ImageSource.FromFile("Images/img.png"));

img.HorizontalOptions = LayoutOptions.Start;
img.VerticalOptions = LayoutOptions.Start;

Switch mainSwitch = new Switch();
mainSwitch.SetBinding(Switch.IsToggledProperty, new Binding("IsSelected"));
mainSwitch.HorizontalOptions = LayoutOptions.End;

/*RelativeLayout layout = new RelativeLayout();
layout.Children.Add(img,
    Constraint.Constant(5),
    Constraint.Constant(5),
    Constraint.RelativeToParent(p => p.Width - 60),
    Constraint.RelativeToParent(p => p.Height - 10)
);
layout.Children.Add(name,
    Constraint.Constant(5),
    Constraint.Constant(5),
    Constraint.RelativeToParent(p => p.Width - 60),
    Constraint.RelativeToParent(p => p.Height - 10)
);
layout.Children.Add(date,
    Constraint.Constant(5),
    Constraint.Constant(25),
    Constraint.RelativeToParent(p => p.Width - 60),
    Constraint.RelativeToParent(p => p.Height - 10)
);
layout.Children.Add(mainSwitch,
    Constraint.RelativeToParent(p => p.Width - 55),
    Constraint.Constant(5),
    Constraint.Constant(50),
    Constraint.RelativeToParent(p => p.Height - 10)
);*/
/*View = layout;*/

View = new StackLayout
{
    Children = {
        img,
        name,
        mainSwitch,
        date

    }
};

这里的问题是我无法让我的图像显示在任何设备上。任何有关设计问题和显示图像的帮助都会有所帮助。

编辑 我想知道如何使这个列表视图响应？现在列表视图在 10" 屏幕上似乎变得很小。我该如何处理？

Answer 1

要获得ViewCell 的布局，请使用以下内容（我省略了任何绑定）：-

        Grid objGrid = new Grid();
        objGrid.BackgroundColor = Color.Gray;
        //
        objGrid.RowDefinitions.Add(new RowDefinition
        {
          Height = new GridLength(1, GridUnitType.Star)
        });
        //
        objGrid.ColumnDefinitions.Add(new ColumnDefinition
        {
            Width = new GridLength(75, GridUnitType.Absolute)
        });
        objGrid.ColumnDefinitions.Add(new ColumnDefinition
        {
            Width = new GridLength(1, GridUnitType.Star)
        });
        objGrid.ColumnDefinitions.Add(new ColumnDefinition
        {
            Width = GridLength.Auto
        });

        //
        // Column 1:-
        Image objImage = new Image();
        objImage.BackgroundColor = Color.Green;
        objImage.Source = ImageSource.FromFile("Image1.png");
        objGrid.Children.Add(objImage, 0,0);

        //
        // Column 2:-
        StackLayout objStackLayoutCol2 = new StackLayout();            
        objGrid.Children.Add(objStackLayoutCol2, 1,0);

        Label objLabel1 = new Label()
        {
            Text = "Name"
        };
        Label objLabel2 = new Label()
        {
            Text = "Date"
        };
        objStackLayoutCol2.Children.Add(objLabel1);
        objStackLayoutCol2.Children.Add(objLabel2);

        //
        // Column 3:-
        Switch objSwitch = new Switch();
        objGrid.Children.Add(objSwitch, 2,0);

有关图像文件的放置，请参阅here，这将很有用。

即在Android 上，您需要确保图像是AndroidResource 并放置在Resources 的Drawable's 部分中。

更新 1：-

对于WindowsPhone，请确保将图像指定为Content 的Build Action，并将图像放在项目文件夹的根目录中。

这里有几张来自Android 和WindowsPhone 的图片，一旦你做对了：-

Answer 2

您的图像文件路径“Images/img.png”可能不正确。该目录表示从.cs文件的当前目录，在同级有一个名为Images的文件夹，在Images文件夹中有一个文件名为img.png的图片。请检查是否属实。如果我看到你的目录结构，我会有一个明确的答案。但这是我首先要看的地方。

根据您提供的目录结构，文件路径应为"~/Images/img.png"