Flutter 질감 디자인 의 밑부분 내 비게 이 션

BottomNavigation Bar 는 바로 아래쪽 네 비게 이 션 표시 줄 컨트롤 입 니 다.응용 밑 에 있 는 질감 디자인 컨트롤 을 표시 합 니 다.소량의 보기에 서 전환 할 수 있 습 니 다.아래쪽 탐색 표시 줄 은 탭,아이콘 또는 두 가지 조합 으로 항목 의 아래쪽 에 표 시 된 항목 을 포함 하여 프로그램의 최상 위 보기 간 의 빠 른 내 비게 이 션 을 제공 합 니 다.비교적 큰 화면 에 대해 서 는 측면 내 비게 이 션 이 더 좋 을 수 있다.
navigation 생 성icon_view.dart 파일 은 NavigationIconView 클래스 를 정의 합 니 다.BottomNavigationBarItem(아래쪽 네 비게 이 션 표시 줄 항목)컨트롤 의 스타일,행동,애니메이션 을 관리 하 는 데 사 용 됩 니 다.

import 'package:flutter/material.dart';
//    ，      
class NavigationIconView {
 //            
 NavigationIconView({
  //     ，    
  Widget icon,
  //     ，    
  Widget title,
  //     ，    
  Color color,
  /*
   * Ticker   
   *        ，    Ticker  
   *  Ticker  ：             
   */
  TickerProvider vsync,
 }):_icon = icon, //       
  //        
  _color = color,
  //          
  item = new BottomNavigationBarItem(
   //      
   icon: icon,
   //      
   title: title
  ),
  //        
  controller = new AnimationController(
   //          ：                
   duration: kThemeAnimationDuration,
   //     
   vsync: vsync,
  ) {
   //       
   _animation = new CurvedAnimation(
    //          
    parent: controller,
    /*
     *        ：
     *  0.5
     *  1.0  
     *      ：               
     */
    curve: new Interval(0.5, 1.0, curve: Curves.fastOutSlowIn),
   );
  }
 //    ，    
 final Widget _icon;
 //    ，    
 final Color _color;
 //    ，       
 final BottomNavigationBarItem item;
 //    ，     
 final AnimationController controller;
 //    ，    
 CurvedAnimation _animation;
 /*
  *    ，    
  * BottomNavigationBarType：             
  * BuildContext：         
  */
 FadeTransition transition(BottomNavigationBarType type, BuildContext context) {
  //     ，      
  Color iconColor;
  //                     
  if (type == BottomNavigationBarType.shifting) {
   //           
   iconColor = _color;
  } else {
   /*
    *                ：
    *   ThemeData       
    *   Theme.of      
    */
   final ThemeData themeData = Theme.of(context);
   /*
    *              （                  ）
    *                     
    *                  
    */
   iconColor = themeData.brightness == Brightness.light
    ? themeData.primaryColor
    : themeData.accentColor;
  }
  //    ，        
  return new FadeTransition(
   //             
   opacity: _animation,
   //    ：        
   child: new SlideTransition(
    /*
     *           
     *               <            >
     *  （1.0，0.0）  Size    
     *  （0.0，1.0）  Size    
     */
    position: new Tween<FractionalOffset>(
     //           
     begin: const FractionalOffset(0.0, 0.02),
     //            ：   
     end: FractionalOffset.topLeft,
    ).animate(_animation), //       ，             
    //    ：          ，            
    child: new IconTheme(
     //            ，       
     data: new IconThemeData(
      //        
      color: iconColor,
      //        
      size: 120.0,
     ),
     //    
     child: _icon,
    )
   )
  );
 }
}

main.dart 파일 을 다시 만 듭 니 다.클래스 CustomIcon 은 사용자 정의 아이콘 으로 용기 컨트롤 을 만 듭 니 다.질감 디자인 의 팝 업 메뉴 컨트롤 을 사용 하여 아래쪽 탐색 표시 줄 의 행동 과 스타일 을 전환 합 니 다.

import 'package:flutter/material.dart';
import 'navigation_icon_view.dart';
//    ，     ，  StatelessWidget（      ）
class CustomIcon extends StatelessWidget {
 //                      
 @override
 Widget build(BuildContext context) {
  //         ，               
  final IconThemeData iconTheme = IconTheme.of(context).fallback();
  //    ，        
  return new Container(
   //         ：      4.0
   margin: const EdgeInsets.all(4.0),
   //     ：        8.0
   width: iconTheme.size - 8.0,
   //     ：        8.0
   height: iconTheme.size - 8.0,
   //       ：      
   decoration: new BoxDecoration(
    //     ：       
    backgroundColor: iconTheme.color
   )
  );
 }
}
//    ，    ，  StatefulWidget（      ）
class MenusDemo extends StatefulWidget {
 /*
  *              
  * createState                    
  *                State        
  */
 @override
 _MenusDemoState createState() => new _MenusDemoState();
}
/*
 *   State     
 *   State：StatefulWidget（      ）       
 *   TickerProviderStateMixin，  Ticker  
 */
class _MenusDemoState extends State<MenusDemo> with TickerProviderStateMixin {
 //    ，            
 int _currentIndex = 2;
 //    ，             ：       
 BottomNavigationBarType _type = BottomNavigationBarType.shifting;
 //    ，  NavigationIconView    
 List<NavigationIconView> _navigationViews;
 /*
  *            
  *           State（  ）         
  *                          
  *                    
  */
 @override
 void initState() {
  //        
  super.initState();
  //    NavigationIconView         
  _navigationViews = <NavigationIconView>[
   /*
    *   NavigationIconView    
    *       
    *       
    *       
    *   Ticker  
    */
   new NavigationIconView(
    icon: new Icon(Icons.access_alarm),
    title: new Text('  '),
    color: Colors.deepPurple[500],
    vsync: this,
   ),
   new NavigationIconView(
    icon: new CustomIcon(),
    title: new Text('  '),
    color: Colors.deepOrange[500],
    vsync: this,
   ),
   new NavigationIconView(
    icon: new Icon(Icons.cloud),
    title: new Text('  '),
    color: Colors.teal[500],
    vsync: this,
   ),
   new NavigationIconView(
    icon: new Icon(Icons.favorite),
    title: new Text('  '),
    color: Colors.indigo[500],
    vsync: this,
   ),
   new NavigationIconView(
    icon: new Icon(Icons.event_available),
    title: new Text('  '),
    color: Colors.pink[500],
    vsync: this,
   ),
  ];
  //       NavigationIconView      
  for (NavigationIconView view in _navigationViews)
   //                  
   view.controller.addListener(_rebuild);
  //                   1.0
  _navigationViews[_currentIndex].controller.value = 1.0;
 }
 //           
 @override
 void dispose() {
  //        
  super.dispose();
  //       NavigationIconView       
  for (NavigationIconView view in _navigationViews)
   //       ，      
   view.controller.dispose();
 }
 //              
 void _rebuild() {
  //                
  setState((){
   //   ，         
  });
 }
 //       
 Widget _buildTransitionsStack() {
  //     ，           
  final List<FadeTransition> transitions = <FadeTransition>[];
  //       NavigationIconView      
  for (NavigationIconView view in _navigationViews)
   //                transition      
   transitions.add(view.transition(_type, context));
  //                 
  transitions.sort((FadeTransition a, FadeTransition b) {
   final Animation<double> aAnimation = a.listenable;
   final Animation<double> bAnimation = b.listenable;
   // aValue：a    
   double aValue = aAnimation.value;
   // bValue：b    
   double bValue = bAnimation.value;
   /*
    *  aValue bValue    
    *        ，aValue   bValue  
    *        ，aValue   bValue  
    */
   return aValue.compareTo(bValue);
  });
  //    ，        
  return new Stack(children: transitions);
 }
 //                      
 @override
 Widget build(BuildContext context) {
  //     ，       
  final BottomNavigationBar botNavBar = new BottomNavigationBar(
   /*
    *              ：    NavigationIconView    
    *                   
    *              
    */
   items: _navigationViews
    .map((NavigationIconView navigationView) => navigationView.item)
    .toList(),
   //         ：            
   currentIndex: _currentIndex,
   //            ：             
   type: _type,
   //            
   onTap: (int index) {
    //                
    setState((){
     //             ，         
     _navigationViews[_currentIndex].controller.reverse();
     //               
     _currentIndex = index;
     //             ，         
     _navigationViews[_currentIndex].controller.forward();
    });
   }
  );
  //                
  return new Scaffold(
   //        
   appBar: new AppBar(
    //            ，             
    title: new Text('      '),
    //            
    actions: <Widget> [
     //               
     new PopupMenuButton<BottomNavigationBarType>(
      //                        
      onSelected: (BottomNavigationBarType value) {
       //                
       setState((){
        //              ：   
        _type = value;
       });
      },
      //                
      itemBuilder: (BuildContext context) => <PopupMenuItem<BottomNavigationBarType>> [
       /*
        *           
        *    ：           
        *    ：    
        */
       new PopupMenuItem<BottomNavigationBarType>(
        value: BottomNavigationBarType.fixed,
        child: new Text('Fixed')
       ),
       new PopupMenuItem<BottomNavigationBarType>(
        value: BottomNavigationBarType.shifting,
        child: new Text('Shifting')
       )
      ]
     )
    ]
   ),
   //     
   body: new Center(
    //     ：_buildTransitionsStack      
    child: _buildTransitionsStack()
   ),
   //        ，         
   bottomNavigationBar: botNavBar,
  );
 }
}
//     
void main() {
 //         ，       
 runApp(new MaterialApp(
  //                    
  title: 'Flutter  ',
  //           
  home: new MenusDemo(),
 ));
}

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.