css - NativeScript:如何使 TabView 菜单缩小以适应设备宽度？

Question

我有一个带有三个 TabViewItem 的 TabView，类似这样:

  <TabView   :selectedIndex="selectedTab" @selectedIndexChange="onTabChange">
      <TabViewItem  title="Add new images">
         some content...
      </TabViewItem>
      <TabViewItem title="Backedup images">
        some content...
      </TabViewItem>
      <TabViewItem title="Manage categories">
       some content...
      </TabViewItem>

    </TabView>

问题是选项卡菜单“溢出”屏幕: 如您所见，由于标题较长，第三个选项卡部分可见。

有没有办法强制选项卡元素“尊重”设备宽度，同时相应地缩小标题的字体大小？

Answer 1

没有直接公开的 API 来调整 Tab 宽度，但您可以通过调整 native View 上的布局参数来实现。

如果您希望为每个选项卡分配相同的宽度，请将屏幕宽度除以选项卡的数量。在 TabView 的加载事件中运行以下代码。

import { isIOS, isAndroid, screen } from 'tns-core-modules/platform';

onTabViewLoaded: function(args) {
    var tabView = args.object;
    if (isAndroid) {
        var nativeTabView = tabView._tabLayout.getChildAt(0),
            width = screen.mainScreen.widthPixels / nativeTabView.getChildCount();

        for (let i = 0; i < nativeTabView.getChildCount(); i++) {
            const view = nativeTabView.getChildAt(i),
                layoutParams = view.getLayoutParams();

            layoutParams.weight = 0;
            layoutParams.width = width;
            view.setLayoutParams(layoutParams);
        }
        nativeTabView.invalidate();
    }
}