Stacklayout 对齐的设计问题

Question

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

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

这是我正在使用的堆栈布局结构。我也用 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

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

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

Answer 2

要获得 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 部分

更新一：-

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

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

Stacklayout 对齐的设计问题

Design issue with Stacklayout alignment

c#

xamarin.forms