Для каждого TabStripItem во вкладках я хочу, чтобы ширина определялась длиной его текста в метке - PullRequest
Новая
       43

Для каждого TabStripItem во вкладках я хочу, чтобы ширина определялась длиной его текста в метке

0 голосов
/ 08 ноября 2019

Я использую компонент Tabs в Nativescript Vue и настроил набор tabStripItems в data, который отображает каждый TabStripItem с использованием v-for. Я хочу, чтобы ширина каждого TabStripItem определялась длиной текста в Label в соответствии с Руководством Google по разработке материалов . 

<Tabs>
      <TabStrip class="tab-strip">
          <TabStripItem v-for="(item, index) in tabStripItems" :key="index" :width="item.text.length * 10">
             <Label :text="item.text"></Label>
          </TabStripItem>
      </TabStrip>
      ...
</Tabs>

Я попробовал отрисовкукаждый TabStripItem статически с атрибутом explict width. 

<Tabs>
    <TabStrip class="tab-strip">
      <TabStripItem width="80">
        <Label text="Flat"></Label>
      </TabStripItem>
      <TabStripItem width="160">
        <Label text="Visitors"></Label>
      </TabStripItem>
      <TabStripItem width="140">
        <Label text="Parking"></Label>
      </TabStripItem>
      <TabStripItem width="280">
        <Label text="Family Members"></Label>
      </TabStripItem>

    </TabStrip>
    ...
</Tabs>

Ширина каждого TabStripItem всегда пропорциональна длине самого длинного текста, в данном случае «членов семьи», следовательно,другие элементы с большим количеством пробелов.

Как добиться неравной ширины для TabStripItem с?

1 Ответ

0 голосов
/ 09 ноября 2019

TabStripItem, кажется, имеет родительскую оболочку внутри TabBar, попробуйте это 

 onTabsLoaded: function(event) {
            var tabs = event.object;
            if (tabs.android) {
                tabs.originalSetTabStripItems = tabs.setTabStripItems;
                tabs.setTabStripItems = function(items) {
                    tabs.originalSetTabStripItems.call(this,
                        items);
                    if (items && items.length) {
                        var tabsBar = this._tabsBar;
                        items.forEach((item, index) => {
                            var view = tabsBar
                                .getViewForItemAt(index);
                            var layoutParams = view
                                .getLayoutParams();
                            layoutParams.weight = 0;
                            layoutParams.width =
                                android.widget
                                .LinearLayout.LayoutParams
                                .WRAP_CONTENT;
                            view.setLayoutParams(
                                layoutParams);
                        });
                    }
                };
            }
        }

Пример игровой площадки

...