Flutter组件封装

封装控件的子项目

通过类来定义子项目，再通过List的泛型来声明变量以供使用

以BottomNavigationBar(底部导航栏)为例

基本用法

bottomNavigationBar: BottomNavigationBar(
    ...
    items: [
    BottomNavigationBarItem(title: Text('首页'), icon: Icon(Icons.home)),
    BottomNavigationBarItem(title: Text('书籍'), icon: Icon(Icons.book)),
    BottomNavigationBarItem(
        title: Text('我的'), icon: Icon(Icons.perm_identity)),
    ],
)

封装

1. 将BottomNavigationBarItem的内容封装成类,使用的时候需要传入label、iconPath、activeIconPath三个参数

   class NavigationIconView {
   // item
   final BottomNavigationBarItem item;
   // title
   final String label;
   // icon path
   final IconData iconPath;
   // actived icon path
   final IconData activeIconPath;
   
   NavigationIconView({@required this.label, @required this.iconPath, @required this.activeIconPath})
       : item = BottomNavigationBarItem(
           title: Text(
               label,
               style: TextStyle(color: Colors.black),
           ),
           icon: Icon(
               iconPath,
           ),
           activeIcon: Icon(
               activeIconPath,
               size: 30,
           ),
       );
   }

2. 在页面中声明变量

   // 限定类型，使用 <> 泛型来指定 List 中保存的数据类型为NavigationIconView
   List<NavigationIconView> _navigationIconViews;
   
   ... 
   
   // 页面初始化的时候对数据进行赋值，按要求传入参数
   _navigationIconViews = [
       NavigationIconView(label: '资讯', iconPath: Icons.new_releases, activeIconPath: Icons.new_releases),
       NavigationIconView(label: '动态', iconPath: Icons.palette, activeIconPath: Icons.palette),
       NavigationIconView(label: '发现', iconPath: Icons.find_replace, activeIconPath: Icons.find_replace),
       NavigationIconView(label: '我的', iconPath: Icons.person_pin, activeIconPath: Icons.person_pin)
   ];

3. 在BottomNavigationBar控件中使用

   bottomNavigationBar: BottomNavigationBar(
       ...
       // view.item => BottomNavigationBarItem(...)
       items: _navigationIconViews.map((view) => view.item).toList(),
   ),

封装一个控件

1. 以Drawer(抽屉)为例，创建一个widget，并写入参数

   class MyDrawer extends StatelessWidget {
   final String headImagePath;
   final List meanuTitle;
   final List meanuIcons;
   const MyDrawer({Key key, @required this.headImagePath, @required this.meanuTitle, @required this.meanuIcons})
       : assert(headImagePath != null),
         assert(meanuTitle != null),
         assert(meanuIcons != null),
         super(key: key);
   
   @override
   Widget build(BuildContext context) {
       return Drawer(...)
   }

2. 在页面中使用

   ...
   Widget build(BuildContext context) {
       return Scaffold(
           ...
           drawer: MyDrawer(
               headImagePath: 'assets/image/xxx.jpg',
               meanuIcons: _meanuIcons,
               meanuTitle: _meanuTitle,
           ),
       )
   }