尝试在 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