Flutter BottomNavigation 底部导航详解及问题记录

拿我格子衫来

发布于 2022-01-24 18:08:03

3.1K0

发布于 2022-01-24 18:08:03

文章被收录于专栏：TopFETopFE

Flutter BottomNavigation 底部导航详解

主要是使用了

Scaffold下的

bottomNavigationBar 整个属性,在这个属性下,可以添加底部图标的背景色,选中颜色,以及是否粘贴到底部,和导航的个数

在app的主页面,home指向底部导航栏的组件

home: BottomNavigation(),

底部导航栏的组件集成 StatefulWidget 在内部创建一个带有状态的组件

// 底部导航
class BottomNavigation extends StatefulWidget {
  @override
  _BottomNavigationState createState() => _BottomNavigationState();
}

状态组件内有一些颜色的变量和选中导航索引的变量

int _currentIndex = 0;
static const int mainNum = 0xFFFA8C16;

这里多数一句 Flutter 提供了两套预设的主题UI 这些UI有很多的常量可以直接引入使用

如颜色, 按钮,图标

Colors.white // 白色颜色
Icons.home // home 图标
FloatingActionButton // 漂浮的按钮

效果图

在colors.dart中查看预设颜色值

在icons.dart中查看预设图标

源码

三个文件 main.dart

import 'package:flutter/material.dart';
import './view/home.dart';
import './view/message.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: BottomNavigation(),
    );
  }
}

// 底部导航
class BottomNavigation extends StatefulWidget {
  @override
  _BottomNavigationState createState() => _BottomNavigationState();
}

class _BottomNavigationState extends State<BottomNavigation> {
  int _currentIndex = 0;
  static const int mainNum = 0xFFFA8C16;
  List<Widget> list = List();

  @override
  void initState() {
    list..add(Home())..add(Message());
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: list[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        selectedItemColor: Colors.white,
        backgroundColor: Color(mainNum),
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(icon:Icon(Icons.home),title: Text('首页')),
          BottomNavigationBarItem(icon:Icon(Icons.message),title: Text('消息'))
        ],
        currentIndex: _currentIndex,
        onTap: (int index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }



}

home.dart

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

class Home extends StatefulWidget {

  Home();

  @override
  State<StatefulWidget> createState() => _Home();

}

class _Home extends State<Home> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {_counter++;});
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
        appBar: AppBar(),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('It is my home page :')
            ],
          ),
        ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }

}

message.dart

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

class Message extends StatefulWidget {

  Message();

  @override
  State<StatefulWidget> createState() => _Message();

}

class _Message extends State<Message> {
  int _counter = 5;

  void _incrementCounter() {
    setState(() {_counter++;});
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('It is my message page')
          ],
        ),
      )
    );
  }

}

事件处理

按钮的点击事件 onPressed: _incrementCounter,

处理方法

 void _incrementCounter() {
    setState(() {_counter++;});
  }

使用void关键字修饰, 使用setState 来修改内部变量

问题1:

假如页面停留在首页, 此时来了一个消息,需要在消息的导航栏上加上徽标,该如何处理?

问题2:

假如现在要做换肤的功能,那要如何做?

问题3:

目前dart辨析的时候,有很多括号, 格式不够优美,有没有第三方,成熟的组件以供使用

问题4:

如何在页面切换时 ,使用动画,自己写?框架有预设吗?

问题5:

如何设置支持导航栏,左滑,优化切换?

效果图

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

flutter

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度