Flutter – 凸底条

Convex Bottombar是一个应用程序栏，其设计方式使其具有凸面形状。它可以使 UI 看起来很棒，还可以改进用户与界面交互的方式。在本文中，我们将使用最简单的凸底栏形式之一构建一个简单的应用程序。

要构建具有凸底栏的应用程序，请按照以下步骤操作：

• 将convex_bottom_bar依赖项导入pubspec.yaml 文件。
• 将依赖项导入到 main.js 中。dart文件。
• 为应用程序结构创建一个 StatefulWidget
• 创建 StatelessWidget 来构建 Bottombar 的上下文

现在，让我们详细探讨以下步骤。

添加依赖：

可以在pubspec.yaml文件中添加凸底栏依赖，如下所示：

导入依赖：

在 main.js 中导入convex_bottom_bar 依赖项。 dart文件使用以下内容：

import 'package:convex_bottom_bar/convex_bottom_bar.dart';

创建应用程序结构：

使用StatefulWidget为应用程序创建一个简单的应用程序结构，如下所示：

Dart

class MyApp extends StatefulWidget {
  @override
  State createState() => _State();
}

构建底栏：

要为应用程序构建底部栏，请使用StatelessWidget和ContexBuilder构建底部栏的内容，如下所示：

Dart

class HelloConvexAppBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('GeeksForGeeks'),
        backgroundColor: Colors.green,),
      body: Center( ),
      bottomNavigationBar: ConvexAppBar(
        style: TabStyle.react,
        backgroundColor: Colors.green,
        items: [
          TabItem(icon: Icons.play_arrow),
          TabItem(icon: Icons.museum),
          TabItem(icon: Icons.book),
        ],
        initialActiveIndex: 1,
        onTap: (int i) => print('click index=$i'),
      ),
    );
  }
}

您可以为底部栏的内容添加图标或图像或任何类型的资源。这里为了简单起见，我们将使用Flutter内置图标，即：

• Icons.play_arrow
• Icons.博物馆
• Icons.book

完整的源代码：

Dart

import 'package:convex_bottom_bar/convex_bottom_bar.dart';
import 'package:flutter/material.dart';
  
  
void main() => runApp(MyApp());
  
class MyApp extends StatefulWidget {
  @override
  State createState() => _State();
}
  
class _State extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: "/",
      routes: {
        "/": (BuildContext context) =>  HelloConvexAppBar(),
      },
    );
  }
}
  
class HelloConvexAppBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('GeeksForGeeks'),
        backgroundColor: Colors.green,),
      body: Center( ),
      bottomNavigationBar: ConvexAppBar(
        style: TabStyle.react,
        backgroundColor: Colors.green,
        items: [
          TabItem(icon: Icons.play_arrow),
          TabItem(icon: Icons.museum),
          TabItem(icon: Icons.book),
        ],
        initialActiveIndex: 1 /*optional*/,
        onTap: (int i) => print('click index=$i'),
      ),
    );
  }
}

输出：

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?

单击此处前往由我们的专家精心策划的指南，旨在让您立即做好行业准备！