zoukankan      html  css  js  c++  java
  • Flutter——BottomNavigationBar组件(底部导航栏组件)

    BottomNavigationBar常用的属性:

    属性名 说明
    items
    List<BottomNavigationBarItem> 底部导航条按钮集合
    iconSize icon
    currentIndex
    默认选中第几个
    onTap
    选中变化回调函数
    fixedColor
    选中的颜色
    type
    BottomNavigationBarType.fixed
    BottomNavigationBarType.shifting

    import 'package:flutter/material.dart';
    
    
    void main() {
      runApp(MaterialApp(
        title: "BottomNavigationBarWidget",
        home: MyApp(),
      ));
    }
    
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text("底部导航栏")),
          body: Tabs(),
        );
      }
    }
    
    
    class Tabs extends StatefulWidget {
      @override
      _TabsState createState() => _TabsState();
    }
    
    
    class _TabsState extends State<Tabs> {
      int _currentIndex = 0;
      List _pageList = [Page("首页页面"), Page("分类页面"), Page("设置页面")];
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body:_pageList[_currentIndex],
          bottomNavigationBar: BottomNavigationBar(
            currentIndex: _currentIndex,
            type: BottomNavigationBarType.fixed,
            onTap: (int index) {
              setState(() {
                this._currentIndex = index;
              });
            },
            items: [
              BottomNavigationBarItem(
                  icon: Icon(Icons.home),
                  title: Text("首页")
              ),
              BottomNavigationBarItem(
                  icon: Icon(Icons.category),
                  title: Text("分类")
              ),
              BottomNavigationBarItem(
                  icon: Icon(Icons.settings),
                  title: Text("分类")
              ),
            ],
          ),
        );
      }
    }
    
    
    class Page extends StatelessWidget {
      String text;
    
      Page(this.text);
    
      @override
      Widget build(BuildContext context) {
        return Center(
          child: Text(text),
        );
      }
    }
  • 相关阅读:
    js中调用ocx控件
    web.xml配置文件中<async-supported>true</async-supported>报错的解决方案
    shiro整合spring配置
    shiro中的reaml理解及实现机制
    oracle数据库安装
    关于身份认证、角色认证和权限认证的shiro-web例子
    创建maven管理的web项目
    hadoop Hive 的建表 和导入导出及索引视图
    hadoop Mapreduce组件介绍
    hadoop hive组件介绍及常用cli命令
  • 原文地址:https://www.cnblogs.com/chichung/p/11996510.html
Copyright © 2011-2022 走看看