美文网首页
Flutter——封装底部bottombar

Flutter——封装底部bottombar

作者: 刘铁崧 | 来源:发表于2020-11-29 16:41 被阅读0次

效果:


import 'package:flutter/material.dart';
class CYBottomBarItem extends BottomNavigationBarItem{
  CYBottomBarItem(String title,String icon) : super(
      title:Text(title),
      icon:Image(image: AssetImage("assets/images/$icon.png")),
      // Image.asset,width: 32,color: Colors.green,),
      activeIcon:Image.asset("assets/images/$icon.png",color: Colors.red,),
  );
}
List<CYBottomBarItem> bottomBarItems = [
  CYBottomBarItem("PETS", "home"),
  CYBottomBarItem("社区", "community"),
  CYBottomBarItem("商铺", "home"),
  CYBottomBarItem("我的","home")
];
List<Widget> bottomPages = [
  CAYJHomePage(),
  CAYJCommunityPage(),
  CAYJShopPage(),
  CAYJUserPage()
];

使用:

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.red,
        splashColor: Colors.transparent,
        visualDensity: VisualDensity.adaptivePlatformDensity,
        highlightColor: Colors.transparent//去除点击tabbar的过度效果
      ),
      home: APPHomePage(),
    );
  }
}
class APPHomePage extends StatefulWidget {
  @override
  _APPHomePageState createState() => _APPHomePageState();
}

class _APPHomePageState extends State<APPHomePage> {
  int _currentSelected = 0;
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      body: IndexedStack(
        index: _currentSelected,
        children: bottomPages,
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentSelected,
        type: BottomNavigationBarType.fixed,
        items: bottomBarItems,
        selectedFontSize: 14,//选中文字大小
        unselectedFontSize: 14,//非选中文字大小
        // selectedItemColor: Colors.blue,
        // unselectedItemColor: Colors.green,
        onTap: (index){
          setState(() {
            _currentSelected = index;
          });
        },
      ),
    );
  }
}

相关文章

网友评论

      本文标题:Flutter——封装底部bottombar

      本文链接:https://www.haomeiwen.com/subject/qjekwktx.html