阅读 155

Flutter实现底部导航栏创建详解

ConvexBottomBar是一个底部导航栏组件，用于展现凸起的TAB效果，支持多种内置样式与动画交互。本文将利用ConvexBottomBar创建漂亮的底部导航栏，感兴趣的可以学习一下

目录

  • 添加依赖项

    • 如何使用

    • 功能

    • 属性

    • 主题

    • 预览图

    • 代码

  • Flutter web问题：Failed to load network image

    • 我的解决办法

      • 参考资料

        ConvexBottomBar是一个底部导航栏组件，用于展现凸起的TAB效果，支持多种内置样式与动画交互。你可以在https://appbar.codemagic.app/上找到在线样例。

        添加依赖项

        在你的项目中去 pubspec。添加依赖项: 添加https://pub.dev/packages/convex_bottom_bar的最新版本。

        运行下列代码，添加依赖

        1
        flutter pub add convex_bottom_bar
        1
        2
        3
        4
        5
        6
        7
        environment:
          sdk: '>=2.12.0 <3.0.0'
        dependencies:
          flutter:
            sdk: flutter
          cupertino_icons: ^1.0.2
          convex_bottom_bar: ^3.0.0

        我们使用convax_bottom_bar 来创建一个非常nice的底部导航栏。

        如何使用

        通常， 「ConvexAppBar」 可以通过设置它的 bottomNavigationBar 来与脚手架一起工作。ConvexAppBar具有两个构造函数，ConvexAppBar()将使用默认样式来简化选项卡的创建。

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        import 'package:convex_bottom_bar/convex_bottom_bar.dart';
         
        Scaffold(
          bottomNavigationBar: ConvexAppBar(
            items: [
              TabItem(icon: Icons.home, title: 'Home'),
              TabItem(icon: Icons.map, title: 'Discovery'),
              TabItem(icon: Icons.add, title: 'Add'),
              TabItem(icon: Icons.message, title: 'Message'),
              TabItem(icon: Icons.people, title: 'Profile'),
            ],
            initialActiveIndex: 2,//optional, default as 0
            onTap: (int i) => print('click index=$i'),
          )
        );

        功能

        • 提供多种内部样式

        • 能够更改AppBar的主题

        • 提供Builder API以自定义新样式

        • 在AppBar上添加徽章

        • 支持优雅的过渡动画

        • 提供Hook API来重载一些内部样式

        • RTL布局支持

        关于支持的样式，可以从这儿查看

        https://pub.flutter-io.cn/packages/convex_bottom_bar

        属性

        下面是 「*Convex_Bottom_Bar*」 的一些属性:

        • 「fixed」 (副标题图标停留在中心)

        • 「fixedCircle」 (相同，但在固定图标的所有边上都有一个白色的圆圈)

        • 「react」 (上标图标取代点击另一个图标)

        • 「reactCircle」 (与上标图标中的白色圆圈相同)

        • 「textIn」 (选定的离子出现相应的标题)

        • 「titled」 (未选择的图标是显示其标题的单个图标)

        • 「flip」 (点击图标显示一个 flip 动画)

        • 「custom」 (使用 ConvexBottomAppBar 构建器自定义预定义的参数)

        • 「height」 (grabbing the appbar)

        • 「top」 (grabbing the superscripted icon)

        • 「curveSize」 (拉伸上标图标的曲线)

        • 「color」 (设置图标的颜色)

        • 「backgroundColor」 (设置 appbar 背景颜色)

        • 「gradient」 (使用渐变小部件设置 appbar 背景颜色)

        • 「activeColor」 (设置圆形颜色)

        主题

        AppBar默认使用内置样式，您可能需要为其设置主题。 以下是一些支持的属性：

        AttributesDescription
        backgroundColorAppBar 背景
        gradient渐变属性，可以覆盖backgroundColor
        heightAppBar 高度
        coloricon/text 的颜色值
        activeColoricon/text 的选中态颜色值
        curveSize凸形大小
        top凸形到AppBar上边缘的距离
        style支持的样式: fixed, fixedCircle, react, reactCircle, ...
        chipBuilder角标构造器builder, ConvexAppBar.badge会使用默认样式

        预览图

        代码

        在 Convex_Bottom_Bar 演示中，首先，我们在这个类中创建一个名为 MyHomePage ()的有状态类，我们创建一个值为 0 的变量 selectedpage 类型的 integer pass。定义一个名为 pageList的列表，在这个列表中我们传递要添加到 bootom 导航栏中的所有页面。

        1
        2
        int selectedpage = 0;
        final _pageList= [Home(), Message(), Persion(), Detail()];

        在 BuildContext ()中，我们定义 Scaffold。

        1
        2
        3
        4
        appBar: AppBar(
          centerTitle: true,
          title: Text('Convex Bottom Bar'),
        ),

        首先在正文中传递 _pageno，其值为 selectedPage。使用 scaffold 属性，我们使用 bottomNavigationBar。在这里，我们创建 ConvexAppBar ()并传递 Items、 initialActiveIndex 和 onTap。在条目中，我们通过所有的屏幕，我们希望在我们的应用程序中显示。在 initialActiveIndexwe 中，我们传递已经定义的变量 selectedpage，在 onTap 中，我们传递 index 并在 setState 中定义 setState () ，我们传递 selectedpage 相当于 index。

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        bottomNavigationBar: ConvexAppBar(
          items: [
            TabItem(icon: Icons._home_, title: 'Home'),
            TabItem(icon: Icons._favorite_, title: 'Favorite'),
            TabItem(icon: Icons._shopping_cart_, title: 'Cart'),
            TabItem(icon: Icons._person_, title: 'Profile'),
          ],
          initialActiveIndex: selectedpage,
          onTap: (int index){
              setState(() {
                selectedpage = index;
              });
          },
        ),

        main.dart

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        25
        26
        27
        28
        29
        30
        31
        32
        33
        34
        35
        36
        37
        38
        39
        40
        41
        42
        43
        44
        45
        46
        47
        48
        49
        50
        51
        52
        53
        54
        55
        56
        57
        58
        59
        60
        61
        62
        import 'package:convex_bottom_bar/convex_bottom_bar.dart';
        import 'package:flutter/material.dart';
        import 'detail.dart';
        import 'home.dart';
        import 'message.dart';
        import 'persion.dart';
         
        void main() {
          runApp(MyApp());
        }
         
        class MyApp extends StatelessWidget {
          // This widget is the root of your application.
          @override
          Widget build(BuildContext context) {
            return MaterialApp(
              debugShowCheckedModeBanner: false,
              theme: ThemeData(
                primarySwatch: Colors.teal,
              ),
              home: MyHomePage(),
            );
          }
        }
         
        class MyHomePage extends StatefulWidget {
          @override
          _MyHomePageState createState() => _MyHomePageState();
        }
         
        class _MyHomePageState extends State<MyHomePage> {
          int selectedpage = 0;
          final _pageNo = [Home(), Message(), Persion(), Detail()];
         
          @override
          Widget build(BuildContext context) {
            return Scaffold(
              appBar: AppBar(
                centerTitle: true,
                title: Text('Convex Bottom Bar'),
              ),
              body: _pageNo[selectedpage],
              bottomNavigationBar: ConvexAppBar(
                   color: Colors.white,
                activeColor: Colors.red,
                backgroundColor: Colors.orange,
                items: [
                  TabItem(icon: Icons.person, title: '新'),
                  TabItem(icon: Icons.favorite, title: '年'),
                  TabItem(icon: Icons.brush, title: '快'),
                  TabItem(icon: Icons.car_rental, title: '乐'),
                ],
                initialActiveIndex: selectedpage,
                onTap: (int index) {
                  setState(() {
                    selectedpage = index;
                  });
                },
              ),
            );
          }
        }

        如果我们创建不同的页面, Home(), Favorite(), CartPage(), ProfilePage(). 在 Home 类中，我们定义一个带有背景颜色的文本。

        Home 页

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        25
        26
        27
        import 'package:flutter/cupertino.dart';
        import 'package:flutter/material.dart';
         
        class Home extends StatefulWidget {
          const Home({Key? key}) : super(key: key);
         
          @override
          _HomeState createState() => _HomeState();
        }
         
        class _HomeState extends State<Home> {
          @override
          Widget build(BuildContext context) {
            return Scaffold(
              appBar: AppBar(
                centerTitle: true,
                title: Text('欢迎来到这儿'),
              ),
              body: Center(
                child: Text(
                  '早起的年轻人',
                  style: TextStyle(fontSize: 60, fontWeight: FontWeight.bold),
                ),
              ),
            );
          }
        }

        Message页:

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        25
        26
        27
        import 'package:flutter/cupertino.dart';
        import 'package:flutter/material.dart';
         
        class Message extends StatefulWidget {
          const Message({Key? key}) : super(key: key);
         
          @override
          _MessageState createState() => _MessageState();
        }
         
        class _MessageState extends State<Message> {
          @override
          Widget build(BuildContext context) {
            return Scaffold(
              appBar: AppBar(
                centerTitle: true,
                title: Text('这是当前页的AppBar'),
              ),
              body: Center(
                child: Text(
                  '因为硬核，所以坚果！',
                  style: TextStyle(fontSize: 60, fontWeight: FontWeight.bold),
                ),
              ),
            );
          }
        }

        Persion页

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        25
        26
        import 'package:flutter/cupertino.dart';
        import 'package:flutter/material.dart';
         
        class Persion extends StatefulWidget {
          const Persion({Key? key}) : super(key: key);
         
          @override
          _PersionState createState() => _PersionState();
        }
         
        class _PersionState extends State<Persion> {
          @override
          Widget build(BuildContext context) {
            return Scaffold(  appBar: AppBar(
                centerTitle: true,
                title: Text('公众号'),
              ),
              body: Center(
                child: Text(
                  '大前端之旅',
                  style: TextStyle(fontSize: 60, fontWeight: FontWeight.bold),
                ),
              ),
            );
          }
        }

        Detail页面

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        25
        26
        27
        // ignore: file_names
        import 'package:flutter/cupertino.dart';
        import 'package:flutter/material.dart';
         
        class Detail extends StatefulWidget {
          const Detail({Key? key}) : super(key: key);
         
          @override
          _DetailState createState() => _DetailState();
        }
         
        class _DetailState extends State<Detail> {
          String image =
              "https://luckly007.oss-cn-beijing.aliyuncs.com/image/image-20220114111115931.png";
          @override
          Widget build(BuildContext context) {
            return Scaffold(
              appBar: AppBar(
                centerTitle: true,
                title: Text('扫码关注'),
              ),
              body: Center(
                child: new Image(image: new NetworkImage(image)),
              ),
            );
          }
        }

        当我们运行应用程序，我们应该得到屏幕的输出像下面的报错信息。

        这是一个

        Flutter web问题：Failed to load network image

        我的解决办法

        flutter build web --release --web-renderer html

        flutter run --web-renderer html

        flutter run -d chrome --web-renderer html

        参考资料

        https://pub.flutter-io.cn/packages/convex_bottom_bar

        https://github.com/hacktons/convex_bottom_bar

        以上就是Flutter实现底部导航栏创建详解的详细内容

        原文链接：https://juejin.cn/post/7053273915631763464


          文章分类
          代码人生
          文章标签
          flutter
          底部
          版权声明：本站是系统测试站点，无实际运营。本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 XXXXXXo@163.com 举报，一经查实，本站将立刻删除。
          相关推荐