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),
        );
      }
    }
  • 相关阅读:
    浏览器能正常访问的url,superagent不能正常访问
    Reactor模式理解
    牛客网剑指offer 二维数组的查找
    在C语言结构体中添加成员函数
    html页面字体相关
    html页面背景设定相关
    快速排序
    html页面边框的另一种写法
    2018暑期北航软件能力培养师资培训有感
    web.xml文件介绍
  • 原文地址:https://www.cnblogs.com/chichung/p/11996510.html
Copyright © 2011-2022 走看看