web-dev-qa-db-ja.com

フラッターのタブバーの幅をカスタマイズするには？

こんにちは、フラッターのタブバーの幅をカスタマイズできますか？タブバーの幅はここで固定されているため、タブバーに長いテキストがある場合は完全に表示されません。コンテンツに基づいてタブバーの幅を柔軟にしたいので、テキストが短いテキストの場合はタブバーの幅が小さくなり、テキストが長いテキストの場合、タブバーの幅は短いテキストタブよりも大きくなります。インターネットで検索してみましたが、問題を解決するための答えが見つかりません。

enter image description here

dartmaterial-designflutter
5
Theodorus Agum Gumilang
TabBar(isScrollable: true)

スクロール可能なタブバーを作成します。タブのテキストコンテンツまたはタブの数が表示サイズに収まらない場合に役立ちます。

または、次のようなことができます：

child: new TabBar(
            tabs: [
              new Container(
                width: 30.0,
                child: new Tab(text: 'hello'),
              ),
              new Container(
                  child: new Tab(text: 'world'),
              ),
            ],
          )
14
behzad besharati
  double width = MediaQuery.of(context).size.width;

    double yourWidth = width  / 5;


bottom: TabBar(
            indicatorColor: Colors.white,
            indicatorSize: TabBarIndicatorSize.label,
            isScrollable: true,
            controller: _tabcontroller,
            tabs: <Widget>[
              Container(
                width: 30,
                height: 50,
                alignment: Alignment.center,
                child: Icon(
                  Icons.camera_alt,
                ),
              ),
              Container(
                width: yourWidth,
                  height: 50,
                  alignment: Alignment.center,
                  child: Text("CHATS")),
              Container(
                  width: yourWidth,
                  height: 50,
                  alignment: Alignment.center,
                  child: Text("STATUS")),
              Container(
                  width: yourWidth,
                  height: 50,
                  alignment: Alignment.center,
                  child: Text("CALL"))
            ],
          ),`


---------------

`
7
Hardik Bhalala

この問題をどのように解決しましたか：

    bottom: TabBar(
      isScrollable: true,
      controller: _tabController,
      indicatorColor: Colors.white,
      labelPadding: EdgeInsets.symmetric(horizontal: 10.0),

      tabs: <Widget>[
        Tab(
          icon: Icon(Icons.camera_alt),
        ),
        Tab(
          text: "CONVERSAS",
        ),
        Tab(
          text: "STATUS",
        ),
        Tab(
          text: "CHAMADAS",
        )
      ],
    )

パディングを使用するだけで、すべての画面サイズで機能すると思います！ ...そして忘れないでください：

   isScrollable: true
5
Leonardo Severo

次のようにlabelPaddingをTabBarウィジェットに追加できます。

child: TabBar(
        indicatorColor: Colors.white,
        labelPadding: EdgeInsets.symmetric(horizontal: 2.0),
        ....
        tabs: <Tab>[
                     ......
        ]
)
......

または、これを行うことができます（お勧めしません）

Material/tabs.Dartファイルで、次の行を編集します。

padding: widget.labelPadding ?? tabBarTheme.labelPadding ?? kTabLabelPadding,

似たようなもので

padding: EdgeInsets.symmetric(horizontal: 2.0),

デフォルトでは、flutterはパディングにkTabLabelPaddingを使用します。

フラッターの問題 ここ

0
Paul Kitatta