Flutter学习第五天：StatefulWidget常用组件总结，撑起Flutter的另外半边天?

StatefulWidget常用基础总结，我也是刚刚开始学Flutter，总结一下主要用于以后学习，避免忘记。

我学习视频的那个老师博客地址，老师说的很不错，清晰易懂。

Flutter学习第一天：小伙花饭钱去买Flutter教学视频，只为了知道Flutter是否支持双系统开发？

Flutter学习第二天：Dart常用数据类型以及方法大总结，满满的干货，对于学过Python和java的太友好了？

Flutter学习的第三天：面向对象编程Dart语言的学习还能让我回忆java基础，“诚不欺我”真的能够快速上手。

Flutter学习第四天：StatelessWidget常用组件总结，撑起Flutter的半边天？

1.页面切换BottomNavigationBar

粘贴代码到你的Android Studio的时候，如果排布不好看，可以使用Ctrl+Alt+L快速格式。
Flutter学习第四天：StatelessWidget常用组件总结，撑起Flutter的半边天？

int _currentIndex=0;   //初始化为0

bottomNavigationBar: BottomNavigationBar(
  currentIndex: _currentIndex,
   onTap: (index){
    
    
     setState(() {
    
    
       _currentIndex=index;
     });
   },
   items: [
     BottomNavigationBarItem(
         icon:Icon(
           Icons.home,
           color: Colors.grey,
         ),
         activeIcon: Icon(
           Icons.home,
           color: Colors.blue,
         ),
         title: Text('首页'),
     ),
     BottomNavigationBarItem(
         icon: Icon(
             Icons.list,
             color: Colors.grey,
         ),
       activeIcon: Icon(
         Icons.list,
         color: Colors.blue,
       ),
       title: Text('列表'),
     )
   ],
 ),
 body: _currentIndex == 0
     ? Center(
         child: ListView(
           children: <Widget>[
             Text('首页'),
           ],
         ),
       )
     : Text('列表'),

效果：

2.RefreshIndicator

代码：

 body: RefreshIndicator(
 child: ListView(
     children:<Widget> [
       Container(
         decoration: BoxDecoration(color: Colors.white),
         alignment: Alignment.center,
         child: Column(
           children:<Widget> [
            Image.network(
              'https://i.ibb.co/CQf368G/fbf18c6a86-Bd6-LF.jpg',
              width: 100,
              height: 200,
            )
           ],
         ),
       )
     ],
   ),
     onRefresh: _handleRefresh,
 ),

 Future<Null> _handleRefresh() async {
    
    
    await Future.delayed(Duration(milliseconds: 200));
    return null;
  }

扫描二维码关注公众号，回复： 12471483 查看本文章

3.FloatingActionButton

代码：

floatingActionButton: FloatingActionButton(
   onPressed: null,
     child: Icon(
       Icons.add,
       size: 20,
     ),
   ),

效果：

4.TextField

代码：

 TextField(
  decoration: InputDecoration(
  contentPadding: EdgeInsets.fromLTRB(5, 0, 0, 0),
  hintText: '请输入',
  hintStyle: TextStyle(fontSize: 15)
 ),
)

5.PageView

 Container(
    height: 100,
        margin: EdgeInsets.only(top: 10),
        decoration:
        BoxDecoration(color: Colors.lightBlueAccent),
        child: PageView(
          children:<Widget> [
              _item('Page1',Colors.deepPurple), //_item私有方法如下
              _item('Page2',Colors.green),
              _item('Page3',Colors.red)
          ],
        ),
      )

_item(String title, Color color) {
    
    
  return Container(
    alignment: Alignment.center,
    decoration: BoxDecoration(color: color),
    child: Text(
      title,
      style: TextStyle(fontSize: 22, color: Colors.white),
    ),
  );

效果：
滑动切换页面PageView