应用程序栏标签栏中的颤振问题大小图标？答案

【问题标题】：Flutter problem size icon in tabbar in appbar?应用程序栏标签栏中的颤振问题大小图标？
【发布时间】：2021-05-02 21:28:30
【问题描述】：

我有一个小问题，我找不到解决方案。我在 APPBAR 中创建了一个 TABBAR，但我无法调整它的大小以使我的标签栏图标可见。

我的标签栏没问题，但图标和标签的大小不太好...

我尝试了几种方法，但都没有奏效......

我的代码：

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  TabController _tabcontroller;
  @override
  void initState() {
    super.initState();
    _tabcontroller = new TabController(length: 3, vsync: this);
    _tabcontroller.addListener(() {
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar:  AppBar(
          backgroundColor: Colors.white,
          automaticallyImplyLeading: false,
          elevation: 1,
          title: new TabBar(
              indicatorColor: Colors.transparent,
              controller: _tabcontroller,
              tabs: [
                new SafeArea(
                  child: new Container(
                    padding: EdgeInsets.all(ScreenUtil().setWidth(20.0)),
                    child: Center(
                      child: new Icon(
                        Icons.icecream,
                        color: _tabcontroller.index == 0
                            ? Theme.of(context).primaryColor
                            : Colors.grey,
                        size: ScreenUtil().setSp(80.0),
                      ),
                    ),
                  ),
                ),
                new SafeArea(
                  child: new Container(
                    padding: EdgeInsets.all(ScreenUtil().setWidth(20.0)),
                    child: Center(
                      child: new Icon(
                        Tinder_clone.iconfinder_338_tinder_logo_4375488__1_,
                        color: _tabcontroller.index == 1
                            ? Theme.of(context).primaryColor
                            : Colors.grey,
                        size: ScreenUtil().setSp(80.0),
                      ),
                    ),
                  ),
                ),
                new SafeArea(
                  child: new Container(
                    padding: EdgeInsets.all(ScreenUtil().setWidth(20.0)),
                    child: Center(
                      child: new Icon(
                        Tinder_clone.iconfinder_message_01_186393,
                        color: _tabcontroller.index == 2
                            ? Theme.of(context).primaryColor
                            : Colors.grey,
                        size: ScreenUtil().setSp(80.0),
                      ),
                    ),
                  ),
                ),
              ]),
        ),

感谢您的帮助，

【问题讨论】：

我认为最好在Scaffold 的body 中创建您的TabBar 并且不要设置appBar 属性。

标签： firebase flutter dart firebase-authentication google-signin

【解决方案1】：

将TabBar 放在AppBar 中时，应使用bottom 属性。

// ... other lines

return new Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        automaticallyImplyLeading: false,
        elevation: 1,
        bottom: new TabBar(
            indicatorColor: Colors.transparent,
            controller: _tabcontroller,

// ... other lines

【讨论】：