草庐IT

在Flutter中实现五种风格的Tab

李留白 2023-03-28 原文

flutter SDK提供的默认标签样式不太吸引人。 但这并不意味着您无法自定义标签的外观。 在Flutter中自定义Tab指示器的样式可以通过简单的代码行完成，而无需实现我们自己的窗口小部件。

在本文中，我将向您展示如何为下一个Flutter项目添加5种不同的标签样式。

首先，您需要使用DefaultTabController类创建一个基本选项卡。 将DefaultTabController分配给MaterialApp小部件的home属性。 作为DefaultTabController的子级，可以将Scaffold与 Appbar和主体一起使用。 将Appbar小部件分配到Scaffold的Appbar属性，以使选项卡的标题部分。 对于脚手架的body属性，可以为TabBarView小部件分配3个子小部件，以在单击时显示Tab内容项。

image

检查完整的代码以获取默认Tab。

return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          elevation: 0,
          bottom: TabBar(
            indicatorSize: TabBarIndicatorSize.label,
            tabs: [
              Tab(
                child: Align(
                  alignment: Alignment.center,
                  child: Text("APPS"),
                ),
              ),
              Tab(
                child: Align(
                  alignment: Alignment.center,
                  child: Text("MOVIES"),
                ),
              ),
              Tab(
                child: Align(
                  alignment: Alignment.center,
                  child: Text("GAMES"),
                ),
              ),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            Icon(Icons.apps),
            Icon(Icons.movie),
            Icon(Icons.games),
          ],
        ),
      ),
    );

1. 圆角Tab风格

作为第一种样式，我们将向选项卡指示器添加圆角样式。 首先，我将简要介绍我们将要修改的参数。

1. unselectedLabelColor –不存在指示符的标签颜色。 基本上，尚未选择的指标。
2. indicatorSize –选定的指标大小。 我们可以添加两个值以使指标为标签宽度或标签宽度。
3. Indicator –这是我们要为指标分配自定义样式的地方

Tab–这将包含Tab标题的列表。 在这里，我们可以为每个Tab标题添加额外的样式。
可以通过添加带有borderRadius 50的BoxDecoration来实现圆角样式。在这里，我们向每个Tab```标题添加红色边框。 当有人选择Tab``时，它将用红色填充。 如果您对边框不感兴趣，可以删除边框并保持简单。

image
return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor:Colors.white,
          elevation: 0,
          bottom: TabBar(
            unselectedLabelColor:Colors.redAccent,
            indicatorSize: TabBarIndicatorSize.label,
            indicator:BoxDecoration(
              color:Colors.redAccent,
              borderRadius:BorderRadius.circular(50),
            ),
            tabs: [
              Tab(
                child:Container(
                  decoration:BoxDecoration(
                    borderRadius:BorderRadius.circular(50),
                    border:Border.all(color:Colors.redAccent,
                      width:1,
                    ),
                  ),
                  child:Align(
                    alignment:Alignment.center,
                    child:Text("APPS"),
                  ),
                ),
              ),
              Tab(
                child:Container(
                  decoration:BoxDecoration(
                    borderRadius:BorderRadius.circular(50),
                    border:Border.all(color:Colors.redAccent,
                      width:1,
                    ),
                  ),
                  child:Align(
                    alignment:Alignment.center,
                    child:Text("MOVIES"),
                  ),
                ),
              ),
              Tab(
                child:Container(
                  decoration:BoxDecoration(
                    borderRadius:BorderRadius.circular(50),
                    border:Border.all(color:Colors.redAccent,
                      width:1,
                    ),
                  ),
                  child:Align(
                    alignment:Alignment.center,
                    child:Text("GASMES"),
                  ),
                ),
              ),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            Icon(Icons.apps),
            Icon(Icons.movie),
            Icon(Icons.games),
          ],
        ),
      ),
    );

2. 圆角带有渐变色Tab风格

我们将删除以前方法中添加到每个Tab的样式。 删除后，向BoxDecoration添加渐变。 您可以使用带有两种颜色的LinearGradient小部件来获得渐变效果。 您可以根据自己的喜好更改渐变。

image
return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor:Colors.white,
          elevation: 0,
          bottom: TabBar(
            unselectedLabelColor:Colors.redAccent,
            indicatorSize: TabBarIndicatorSize.tab,
            indicator:BoxDecoration(
              gradient:LinearGradient(
                colors:[
                  Colors.redAccent,
                  Colors.orangeAccent,
                ],
              ),
              color:Colors.redAccent,
              borderRadius:BorderRadius.circular(50),
            ),
            tabs: [
              Tab(
                child:Align(
                  alignment:Alignment.center,
                  child:Text("APPS"),
                ),
              ),
              Tab(
                child:Align(
                  alignment:Alignment.center,
                  child:Text("MOVIES"),
                ),
              ),
              Tab(
                child:Align(
                  alignment:Alignment.center,
                  child:Text("GASMES"),
                ),
              ),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            Icon(Icons.apps),
            Icon(Icons.movie),
            Icon(Icons.games),
          ],
        ),
      ),
    );

3. 矩形Tab风格

矩形样式可以通过更改上一个中的小代码来完成。 可以通过为leftTop和rightTop都添加10来更改boxDecoration的BorderRadius。 然后，我将appbar backgroundColor更改为红色，以使其看起来更好。

image
return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor:Colors.redAccent,
          elevation: 0,
          bottom: TabBar(
            labelColor:Colors.redAccent,
            unselectedLabelColor:Colors.white,
            indicatorSize: TabBarIndicatorSize.label,
            indicator:BoxDecoration(
              color:Colors.white,
              borderRadius:BorderRadius.only(
                topLeft:Radius.circular(10),
                topRight:Radius.circular(10),
              ),
            ),
            tabs: [
              Tab(
                child:Align(
                  alignment:Alignment.center,
                  child:Text("APPS"),
                ),
              ),
              Tab(
                child:Align(
                  alignment:Alignment.center,
                  child:Text("MOVIES"),
                ),
              ),
              Tab(
                child:Align(
                  alignment:Alignment.center,
                  child:Text("GASMES"),
                ),
              ),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            Icon(Icons.apps),
            Icon(Icons.movie),
            Icon(Icons.games),
          ],
        ),
      ),
    );

4.菱形Tab样式

您可以通过为ShapeDecoration小部件的shape参数添加带有BeveledRectangleBorder的ShapeDecoration来获得Diamond选项卡样式。 BeveledRectangleBorder将允许您添加展平角而不是圆角。

在这里，我们使用borderRadius作为10使其看起来像这样。

image
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor:Colors.white,
          elevation: 0,
          bottom: TabBar(
            unselectedLabelColor:Colors.redAccent,
            indicatorPadding:EdgeInsets.only(left:30,right:30),
            indicator:ShapeDecoration(
              color:Colors.redAccent,
              shape:BeveledRectangleBorder(
                side:BorderSide(
                  color:Colors.redAccent,
                ),
                borderRadius:BorderRadius.circular(10),
              ),
            ),
            tabs: [
              Tab(
                child:Align(
                  alignment:Alignment.center,
                  child:Text("APPS"),
                ),
              ),
              Tab(
                child:Align(
                  alignment:Alignment.center,
                  child:Text("MOVIES"),
                ),
              ),
              Tab(
                child:Align(
                  alignment:Alignment.center,
                  child:Text("GASMES"),
                ),
              ),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            Icon(Icons.apps),
            Icon(Icons.movie),
            Icon(Icons.games),
          ],
        ),
      ),
    );

5.菱形Tab样式（2）

同样，通过更改BeveledRectangleBorder的borderRadius，可以实现不同的形状。 您可以将borderRadius更改为20，以获得其他形状。 您可以通过更改borderRadius值尝试不同的样式。

image
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor:Colors.white,
          elevation: 0,
          bottom: TabBar(
            unselectedLabelColor:Colors.redAccent,
            indicatorPadding:EdgeInsets.only(left:30,right:30),
            indicator:ShapeDecoration(
              color:Colors.redAccent,
              shape:BeveledRectangleBorder(
                side:BorderSide(
                  color:Colors.redAccent,
                ),
                borderRadius:BorderRadius.circular(20),
              ),
            ),
            tabs: [
              Tab(
                child:Align(
                  alignment:Alignment.center,
                  child:Text("APPS"),
                ),
              ),
              Tab(
                child:Align(
                  alignment:Alignment.center,
                  child:Text("MOVIES"),
                ),
              ),
              Tab(
                child:Align(
                  alignment:Alignment.center,
                  child:Text("GASMES"),
                ),
              ),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            Icon(Icons.apps),
            Icon(Icons.movie),
            Icon(Icons.games),
          ],
        ),
      ),
    );

我希望您能通过几行代码更好地了解如何更改选项卡样式。 如果您想观看此视频，请观看以下视频。
https://www.youtube.com/watch?v=Vnd0yvCkdNA&feature=youtu.be

FlutterTabcodesectionchild

有关在Flutter中实现五种风格的Tab的更多相关文章

  1. ruby - 在 Ruby 中实现 `call_user_func_array` - 2

    我怎样才能完成http://php.net/manual/en/function.call-user-func-array.php在ruby中？所以我可以这样做:classAppdeffoo(a,b)putsa+benddefbarargs=[1,2]App.send(:foo,args)#doesn'tworkApp.send(:foo,args[0],args[1])#doeswork,butdoesnotscaleendend 最佳答案 尝试分解数组App.send(:foo,*args)

  2. ruby CSV : How can I read a tab-delimited file? - 2

    CSV.open(name,"r").eachdo|row|putsrowend我得到以下错误:CSV::MalformedCSVErrorUnquotedfieldsdonotallow\ror\n文件名是一个.txt制表符分隔文件。我是专门做的。我有一个.csv文件，我转到excel，并将文件保存为.txt制表符分隔的文件。所以它是制表符分隔的。CSV.open不应该能够读取制表符分隔的文件吗？ 最佳答案 尝试像这样指定字段分隔符:CSV.open("name","r",{:col_sep=>"\t"}).eachdo|row|

  3. ruby - 模块嵌套代码风格偏好 - 2

    我的假设是moduleAmoduleBendend和moduleA::Bend是一样的。我能够从thisblog找到解决方案,thisSOthread和andthisSOthread.为什么以及什么时候应该更喜欢紧凑语法A::B而不是另一个，因为它显然有一个缺点？我有一种直觉，它可能与性能有关，因为在更多命名空间中查找常量需要更多计算。但是我无法通过对普通类进行基准测试来验证这一点。 最佳答案 这两种写作方法经常被混淆。首先要说的是，据我所知，没有可衡量的性能差异。(在下面的书面示例中不断查找)最明显的区别，可能也是最著名的，是你的

  4. ruby-on-rails - 如何在 Ruby on Rails 中实现无向图？ - 2

    我需要在RubyonRails中实现无向图G=(V,E)并考虑构建一个Vertex和一个Edge模型，其中Vertex有_多条边。由于边恰好连接两个顶点，您将如何在Rails中执行此操作？您是否知道任何有助于实现此类图表的gem或库(对重新发明轮子不感兴趣;-))？ 最佳答案 不知道有任何现有库在ActiveRecord之上提供图形逻辑。您可能必须实现自己的Vertex、EdgeActiveRecord支持的模型(请参阅Rails安装的rails/activerecord中的vertex.rb和edge.rb/test/fixtur

  5. ruby-on-rails - 如何在 Ruby on Rails 中实现由 JSF 2.0 (Primefaces) 驱动的 UI 魔法 - 2

    按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭10年前。问题1)我想知道ruby​​onrails是否有功能类似于primefaces的gem。我问的原因是如果您使用primefaces(http://www.primefaces.org/showcase-labs/ui/home.jsf)，开发人员无需担心javascript或jquery的东西。据我所知，JSF是一个规范，基于规范的各种可用实现，prim

  6. c - Ruby - 源代码 - 编码风格 - 2

    查看Ruby代码，它具有以下proc_arity:staticVALUEproc_arity(VALUEself){intarity=rb_proc_arity(self);returnINT2FIX(arity);}更多的是C编码风格问题，但为什么staticVALUE在单独的一行而不是像这样的:staticVALUEproc_arity(VALUEself) 最佳答案 它来自UNIX世界，因为它有助于轻松grep函数的定义:$grep-n'^proc_arity'*.c或使用vim:/^proc_arity

  7. ruby - 在 Ruby 中实现 to_int 和 to_str 的后果 - 2

    我haveaclass它公开了一个字符串值和一个int值(分别是命令输出和退出代码)。除了通过to_s和to_i公开它们之外，我还使用to_str和to_int，如下所示:classStatusdefto_s@outputendalias:to_str:to_sdefto_i@status.exitstatusendalias:to_int:to_iend我的想法是能够在尽可能多的情况下使用这个对象。将其强制转换为字符串或整数会增加可用性。例如，我可以将对象与字符串连接起来:a_string="Outputwas:"+results(我想用这个作为int强制转换的例子，但是Fixnum

  8. Ruby:如何将数组拼接成 Lisp 风格的列表？ - 2

    这是我发现自己偶尔想做的事情。假设我有一个参数列表。在Lisp中，我可以像这样`(imaginary-function,@args)为了调用将数组从一个元素转换为正确数量的参数的函数。Ruby中是否有类似的功能？或者我只是在这里使用了一个完全错误的成语？ 最佳答案 是的!它被称为splat运算符。a=[1,44]p(*a) 关于Ruby:如何将数组拼接成Lisp风格的列表？，我们在StackOverflow上找到一个类似的问题： https://stackov

  9. ruby - 在 Ruby 中实现二叉树 - 2

    我一直在尝试在Ruby中实现BinaryTree类，但我得到了stackleveltoodeep错误，尽管我似乎没有在该特定代码段中使用任何递归:1.classBinaryTree2.includeEnumerable3.4.attr_accessor:value5.6.definitialize(value=nil)7.@value=value8.@left=BinaryTree.new#stackleveltoodeephere9.@right=BinaryTree.new#andhere10.end11.12.defempty?13.(self.value==nil)?true:

  10. ruby - 如何在 Ruby 中实现私有(private)内部类 - 2

    来自Java，我正在尝试在Ruby中实现LinkedList。我在Java中实现它的通常方法是有一个名为LinkedList的类和一个名为Node的私有(private)内部类，其中LinkedList的每个对象都作为Node对象。classLinkedListprivateclassNodeattr_accessor:val,:nextendend我不想将Node类暴露给外部世界。然而，通过Ruby中的这个设置，我可以使用这个访问LinkedList类之外的私有(private)Node类对象-node=LinkedList::Node.new我知道，在Ruby1.9中，我们可以使用

随机推荐