草庐IT

dart - 在 flutter 中更改标签栏的背景颜色

coder 2023-07-22 原文

我试图在 flutter 中更改标签栏的背景颜色,我尝试了以下方法(在该论坛上被接受为答案)但它没有用:

这是代码

   return new MaterialApp(
      theme: new ThemeData(
      brightness: Brightness.light,
      primaryColor: Colors.pink[800], //Changing this will change the color of  the TabBar
      accentColor: Colors.cyan[600],
    ),

编辑:

当我更改主题数据颜色时,背景颜色不会改变。我试图在应用栏下方创建一个水平滚动子菜单,有人建议我使用标签栏。

这是整个 dart 文件:

  import 'package:flutter/material.dart';
  import 'package:font_awesome_flutter/font_awesome_flutter.dart';

  class Index extends StatelessWidget {

//final User user;

  // HomeScreen({Key key, @required this.user}) : super(key: key);

  @override
   Widget build(BuildContext context) {
     // TODO: implement build
    // String emoji = emojify(":cool:");
   return new MaterialApp(
     theme: new ThemeData(
      brightness: Brightness.light,
       primaryColor: Colors.white, //Changing this will change the color of     the TabBar
      accentColor: Colors.cyan[600],
     ),

    home: DefaultTabController(
    length: 2,
  child: Scaffold(
  appBar: new AppBar(
     backgroundColor: const Color(0xFF0099a9),
     title: new Image.asset('images/lb_appbar_small.png', fit: BoxFit.none,),
     bottom: TabBar(
          tabs: [
            Tab( text: "Tab 1",),
            Tab(text: "Tab 2"),
             ],       
     ),
  ),
    body: Column(children: <Widget>[
          Row(
            //ROW 1
            children: [
              Container(
                margin: EdgeInsets.all(25.0),
                child: IconButton(
                     icon: new Icon(FontAwesomeIcons.checkSquare,),
                     iconSize: 60.0,
                     color: const Color(0xFF0099a9),
                      onPressed: () { print("Pressed"); }
                ),
              ),
              Container(
                margin: EdgeInsets.all(25.0),
                  child: IconButton(
                     icon: new Icon(FontAwesomeIcons.glasses,),
                     iconSize: 60.0,
                     color: const Color(0xFF0099a9),
                      onPressed: () { print("Pressed"); }
                  )

              ),
            Container(
                margin: EdgeInsets.all(25.0),
                  child: IconButton(
                     icon: new Icon(FontAwesomeIcons.moon,),
                     iconSize: 60.0,
                     color: const Color(0xFF0099a9),
                      onPressed: () { print("Pressed"); 
                      Text("Check Out");
                      }
                  )

              ),
            ]
          ),
          Row(//ROW 2
              children: [
            Container(
                margin: EdgeInsets.all(25.0),
                  child: IconButton(
                     icon: new Icon(FontAwesomeIcons.users,),
                     iconSize: 60.0,
                     color: const Color(0xFF0099a9),
                      onPressed: () { print("Pressed"); }
                  )

              ),
            Container(
                margin: EdgeInsets.all(25.0),
                  child: IconButton(
                     icon: new Icon(FontAwesomeIcons.trophy,),
                     iconSize: 60.0,
                     color: const Color(0xFF0099a9),
                      onPressed: () { print("Pressed"); }
                  )

              ),
             Container(
                margin: EdgeInsets.all(25.0),
                  child: IconButton(
                     icon: new Icon(FontAwesomeIcons.calendar,),
                     iconSize: 60.0,
                     color: const Color(0xFF0099a9),
                      onPressed: () { print("Pressed"); }
                  )

              )
          ]),
          Row(// ROW 3
              children: [
            Container(
                margin: EdgeInsets.all(25.0),
                  child: IconButton(
                     icon: new Icon(FontAwesomeIcons.fileExcel,),
                     iconSize: 60.0,
                     color: const Color(0xFF0099a9),
                      onPressed: () { print("Pressed"); }
                  )

              ),
            Container(
                margin: EdgeInsets.all(25.0),
                  child: IconButton(
                     icon: new Icon(FontAwesomeIcons.shoppingCart,),
                     iconSize: 60.0,
                     color: const Color(0xFF0099a9),
                      onPressed: () { print("Pressed"); }
                  )

              ),
             Container(
                margin: EdgeInsets.all(25.0),
                  child: IconButton(
                     icon: new Icon(FontAwesomeIcons.list,),
                     iconSize: 60.0,
                     color: const Color(0xFF0099a9),
                      onPressed: () { print("Pressed"); }
                  )

              ),
          ]),
        ],
        ),


 bottomNavigationBar: new BottomNavigationBar(
    items: [
      new BottomNavigationBarItem(
          icon: new Icon(Icons.feedback, color: const Color(0xFF0099a9),),
          title: new Text("feedback")
      ),
      new BottomNavigationBarItem(
          icon: new Icon(Icons.help, color: const Color(0xFF0099a9),),
          title: new Text("help")
      ),
      new BottomNavigationBarItem(
          icon: new Icon(Icons.people, color: const Color(0xFF0099a9),),
          title: new Text("community",)
       )
     ]
    )







         )
   )
 );






  }
}

最佳答案

您的 AppBar 中有 TabBar 因为它采用相同的颜色,只需将 TabBar 移到 Appbar 之外

    Scaffold(
                    appBar: new AppBar(
                      backgroundColor: const Color(0xFF0099a9),
                      title: new Image.asset(
                        'images/lb_appbar_small.png',
                        fit: BoxFit.none,
                      ),
                    ),
                    body: Column(
                      children: <Widget>[
                        TabBar(
                          tabs: [
                            Tab(
                              text: "Tab 1",
                            ),
                            Tab(text: "Tab 2"),
                          ],
                        ),
                        Row(
                            //ROW 1
                         ....

关于dart - 在 flutter 中更改标签栏的背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52154743/

有关dart - 在 flutter 中更改标签栏的背景颜色的更多相关文章

  1. ruby-on-rails - Ruby on Rails 迁移,将表更改为 MyISAM - 2

    如何正确创建Rails迁移,以便将表更改为MySQL中的MyISAM?目前是InnoDB。运行原始执行语句会更改表,但它不会更新db/schema.rb,因此当在测试环境中重新创建表时,它会返回到InnoDB并且我的全文搜索失败。我如何着手更改/添加迁移,以便将现有表修改为MyISAM并更新schema.rb,以便我的数据库和相应的测试数据库得到相应更新? 最佳答案 我没有找到执行此操作的好方法。您可以像有人建议的那样更改您的schema.rb,然后运行:rakedb:schema:load,但是,这将覆盖您的数据。我的做法是(假设

  2. ruby - 在院子里用@param 标签警告 - 2

    我试图使用yard记录一些Ruby代码,尽管我所做的正是所描述的here或here#@param[Integer]thenumberoftrials(>=0)#@param[Float]successprobabilityineachtrialdefinitialize(n,p)#initialize...end虽然我仍然得到这个奇怪的错误@paramtaghasunknownparametername:the@paramtaghasunknownparametername:success然后生成的html看起来很奇怪。我称yard为:$yarddoc-mmarkdown我做错了什么?

  3. ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2

    我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem,所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re

  4. ruby-on-rails - 项目升级后 Pow 不会更改 ruby​​ 版本 - 2

    我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby​​版本(从1.9.3到2.0.0,我使用RVM)当我切换ruby​​版本、安装所有gem依赖项时,我通过运行railss并访问localhost:3000确保该应用程序正常运行以前,我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后,由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0,此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘

  5. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB? - 2

    所以我在关注Railscast,我注意到在html.erb文件中,ruby代码有一个微弱的背景高亮效果,以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果?谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*,只需点击cmd+shift+P即可获得命令菜单,然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中,键入ERB并在看到包时选择

  6. ruby - Capistrano 3 在任务中更改 ssh_options - 2

    我尝试使用不同的ssh_options在同一阶段运行capistranov.3任务。我的production.rb说:set:stage,:productionset:user,'deploy'set:ssh_options,{user:'deploy'}通过此配置,capistrano与用户deploy连接,这对于其余的任务是正确的。但是我需要将它连接到服务器中配置良好的an_other_user以完成一项特定任务。然后我的食谱说:...taskswithoriginaluser...task:my_task_with_an_other_userdoset:user,'an_othe

  7. ruby-on-rails - 使用 Rmagick 或 ImageMagick 在背景上放置标题 - 2

    我有一张背景图片,我想在其中添加一个文本框。我想弄清楚如何将标题放置在其顶部的正确位置。(我使用标题是因为我需要自动换行功能)。现在,我只能让文本显示在左上角,但我需要能够手动定位它的开始位置。require'RMagick'require'Pry'includeMagicktext="Loremipsumdolorsitamet"img=ImageList.new('template001.jpg')img 最佳答案 这是使用convert的ImageMagick命令行的答案。如果你想在Rmagick中使用这个方法,你必须自己移植

  8. ruby - 更改 ActiveRecord 中对象的类 - 2

    假设我有一个FireNinja我的数据库中的对象,使用单表继承存储。后来才知道他真的是WaterNinja.将他更改为不同的子类的最干净的方法是什么?更好的是,我很想创建一个新的WaterNinja对象并替换旧的FireNinja在数据库中,保留ID。编辑我知道如何创建新的WaterNinja来self现有FireNinja的对象,我也知道我可以删除旧的并保存新的。我想做的是改变现有项目的类别。我是通过创建一个新对象并执行一些ActiveRecord魔法来替换行,还是通过对对象本身做一些疯狂的事情,或者甚至通过删除它并使用相同的ID重新插入来做到这一点,这是问题的一部分。

  9. ruby 诅咒颜色 - 2

    如何使用Ruby的默认Curses库获取颜色?所以像这样:puts"\e[0m\e[30;47mtest\e[0m"效果很好。在浅灰色背景上呈现漂亮的黑色。但是这个:#!/usr/bin/envrubyrequire'curses'Curses.noecho#donotshowtypedkeysCurses.init_screenCurses.stdscr.keypad(true)#enablearrowkeys(forpageup/down)Curses.stdscr.nodelay=1Curses.clearCurses.setpos(0,0)Curses.addstr"Hello

  10. ruby - Rails 3 的 RGB 颜色选择器 - 2

    状态:我正在构建一个应用程序,其中需要一个可供用户选择颜色的字段,该字段将包含RGB颜色代码字符串。我已经测试了一个看起来很漂亮但效果不佳的。它是“挑剔的颜色”,并托管在此存储库中:https://github.com/Astorsoft/picky-color.在这里我打开一个关于它的一些问题的问题。问题:请建议我在Rails3应用程序中使用一些颜色选择器。 最佳答案 也许页面上的列表jQueryUIDevelopment:ColorPicker为您提供开箱即用的产品。原因是jQuery现在包含在Rails3应用程序中,因此使用基

随机推荐