Question

我有这个XAML，但没有满足我的要求：

$(".cat-slides").on('changed.owl.carousel', function() {
    // get the index of the active item
    const activeItem = document.querySelector('.owl-carousel.cat-slides .active');
    const allItems = Array.from(activeItem.parentNode.children);
    const index = allItems.indexOf(activeItem);

    // count the clones
    const cloneCount = activeItem.parentNode.querySelectorAll('.cloned').length;

    // take the previous/next item's index, then subtract half the clones from it
    const prevButtonIndex = index - 1 - cloneCount / 2;
    const nextButtonIndex = index + 1 - cloneCount / 2;

    // get references to the next and previous button elements
    const allButtons = document.querySelectorAll('.owl-dot');
    const nextButton = allButtons[nextButtonIndex];
    const prevButton = allButtons[prevButtonIndex];

    // example of how you'd change the background image of each button
    if (nextButton) nextButton.style.backgroundImage = "path/to/next/image";
    if (prevButton) prevButton.style.backgroundImage = "path/to/prev/image";
});

为简单起见，我没有包含Text和其他属性。请注意，我要使用auto，因为这会完美调整元素的大小。

这里发生的是所有四个列都出现在左侧。但是我想在左边有0列，在右边有1,2和3列，中间有一个空格。

有人对最后三栏为什么没有到右边有想法吗？

Answer 1

如果您说列宽为“自动”，它将检查其子级的必要大小，在这种情况下为标签，并且不会调整为StartAndExpand。

您可以编辑第一列以键入GridUnit.Star，并将适合剩余空间。

<Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="auto" />
      <ColumnDefinition Width="auto" />
      <ColumnDefinition Width="auto" />
   </Grid.ColumnDefinitions>

如何使用Xamarin Forms在左边分隔一个元素，在右边分隔三个元素？

1 个答案: