嘗試在 flutter 選項卡欄布局中的每個選項卡中的圖標下方顯示圖標和文本時，底部溢出 4 個像素

Question

我正在嘗試在 flutter 中創建一個標簽欄，如下所示：

TabController _controller;
      int _selectedIndex = 0;
    
      List<Widget> list = [
        Tab(
          icon: Image.asset(
            'images/dollar_world_grid_selected.png',
            width: 50.0,
            height: 50.0,
          ),
          child: Text(
            "Currency",
            style: TextStyle(color: Color.fromRGBO(127, 127, 127, 0.4)),
          ),
        ),
        Tab(
            icon: Image.asset(
              'images/gold-bars.png',
              width: 50.0,
              height: 50.0,
            ),
            child: Text(
              "Gold",
              style: TextStyle(color: Color.fromRGBO(127, 127, 127, 0.4)),
            )),
      ];
    
     @override
      void initState() {
        super.initState();
    
        // Create TabController for getting the index of current tab
        _controller = TabController(length: list.length, vsync: this);
    
        _controller.addListener(() {
          setState(() {
            _selectedIndex = _controller.index;
    
            list = [
              Tab(
                icon: Image.asset(
                  _selectedIndex == 0
                      ? 'images/dollar_world_grid_selected.png'
                      : 'images/dollar_world_grid.png',
                  width: 50.0,
                  height: 50.0,
                ),
                child: Text(
                  "Currency",
                  style: TextStyle(color: Color.fromRGBO(127, 127, 127, 0.4)),
                ),
              ),
              Tab(
                  icon: Image.asset(
                    _selectedIndex == 1
                        ? 'images/gold-bars-selected.png'
                        : 'images/gold-bars.png',
                    width: 50.0,
                    height: 50.0,
                  ),
                  child: Text(
                    "Gold",
                    style: TextStyle(color: Color.fromRGBO(127, 127, 127, 0.4)),
                  )),
            ];
          });
        });
       }
    
     @override
      Widget build(BuildContext context) {
        // This method is rerun every time setState is called, for instance as done
        // by the _incrementCounter method above.
        //
        // The Flutter framework has been optimized to make rerunning build methods
        // fast, so that you can just rebuild anything that needs updating rather
        // than having to individually change instances of widgets.
    
        return Scaffold(
            appBar: PreferredSize(
                preferredSize: Size.fromHeight(200.0), // here the desired height
                child: AppBar(
                  // Here we take the value from the MyHomePage object that was created by
                  // the App.build method, and use it to set our appbar title.
    
                  title: Row(children: <Widget>[
                    Image.asset(
                      'images/logobig.png',
                      width: 50.0,
                      height: 50.0,
                    ),
                    Text(widget.title),
                  ]),
                  backgroundColor: Colors.blue,
                  bottom: TabBar(
                    controller: _controller,
                    indicatorColor: Color.fromRGBO(43, 73, 193, 0.4),
                    tabs: list,
                  ),
                )),
    body: TabBarView(controller: _controller, children: [
    ]));

如您所見，每個選項卡都包含一個圖標和其下方的文本。 不幸的是，output 如下：

如您所見，文本未顯示，並且底部溢出了 4 個像素。 知道如何在每個選項卡中顯示一個圖標和一個帶有錯誤的圖標下方的文本嗎？ 謝謝。

Answer 1

只需使用SizedBox或Container包裝您的Tab 小部件並將高度設置為80 或更大。 :)

Answer 2

像這樣從你的Tab圖像中減少4px

Image.asset(
  'images/gold-bars.png',
   width: 46.0,
   height: 46.0,
)

Answer 3

將標簽欄小部件的高度增加 4px

 appBar: PreferredSize(
            preferredSize: Size.fromHeight(204.0), // change 200 to 204
            child: AppBar(
            //your code