Flutter(一):用BottomNavigationBar实现底部导航栏架构

效果图(左ios右Android):

主要涉及到5个文件,main.dart是程序入口,MainPage.dart是主要界面(相当于Android中的MainActivity),HomePge.dart、FindPage.dart、MinePage.dart分别是首页、发现、我的。

首先看Main.dart代码:

import 'package:flutter/material.dart';
import 'package:flutter_app/MainPage.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Materia
  • 4
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
好的,以下是一个简单的底部导航栏的示例代码: 1. 在 pubspec.yaml 文件中添加依赖: ``` dependencies: flutter: sdk: flutter cupertino_icons: ^1.0.2 ``` 2. 在 lib 目录下创建四个页面,分别是 home.dart、cart.dart、order.dart 和 mine.dart。 3. 在 main.dart 文件中实现底部导航栏: ``` import 'package:flutter/material.dart'; import 'package:flutter/cupertino.dart'; import 'home.dart'; import 'cart.dart'; import 'order.dart'; import 'mine.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(title: 'Flutter BottomNavigationBar Demo'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { int _selectedIndex = 0; static List<Widget> _widgetOptions = <Widget>[ Home(), Cart(), Order(), Mine(), ]; void _onItemTapped(int index) { setState(() { _selectedIndex = index; }); } @override Widget build(BuildContext context) { return Scaffold( body: Center( child: _widgetOptions.elementAt(_selectedIndex), ), bottomNavigationBar: CupertinoTabBar( items: <BottomNavigationBarItem>[ BottomNavigationBarItem( icon: Icon(Icons.home), label: '首页', ), BottomNavigationBarItem( icon: Icon(Icons.shopping_cart), label: '购物车', ), BottomNavigationBarItem( icon: Icon(Icons.assignment), label: '订单', ), BottomNavigationBarItem( icon: Icon(Icons.person), label: '我的', ), ], currentIndex: _selectedIndex, onTap: _onItemTapped, activeColor: Colors.blue, inactiveColor: Colors.grey, ), ); } } ``` 4. 在 home.dart、cart.dart、order.dart 和 mine.dart 文件中分别实现对应的页面,例如: ``` import 'package:flutter/material.dart'; class Home extends StatelessWidget { @override Widget build(BuildContext context) { return Container( child: Center( child: Text('首页'), ), ); } } ``` 5. 运行程序,即可看到底部导航栏和对应的页面。 以上代码仅供参考,具体实现方式可以根据实际情况进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值