美文网首页
Flutter(十四):AppBar

Flutter(十四):AppBar

作者: 林ze宏 | 来源:发表于2020-07-22 09:41 被阅读0次
    import 'package:flutter/material.dart';
    
    import 'package:app03/pages/home/HomePage.dart';
    import 'package:app03/pages/category/CategoryPage.dart';
    import 'package:app03/pages/settings/SettingsPage.dart';
    
    class TabsPage extends StatefulWidget {
      final int index;
      TabsPage({Key key, this.index = 0}) : super(key: key);
      @override
      _TabsPageState createState() => _TabsPageState(this.index);
    }
    
    class _TabsPageState extends State<TabsPage> {
      int currentIndex = 0;
    
      _TabsPageState(index) {
        this.currentIndex = index;
      }
    
      List listTabs = [
        HomePage(),
        CategoryPage(),
        SettingsPage(),
      ];
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('flutter 标题'),
            centerTitle: true,
            backgroundColor: Colors.pink,
            leading: IconButton(
              icon: Icon(Icons.menu),
              onPressed: () {
                print('menu');
              },
            ),
            actions: <Widget>[
              IconButton(
                icon: Icon(Icons.search),
                onPressed: () {
                  print('search');
                },
              ),
              IconButton(
                icon: Icon(Icons.settings),
                onPressed: () {
                  print('settings');
                },
              )
            ],
          ),
          body: this.listTabs[this.currentIndex],
          bottomNavigationBar: BottomNavigationBar(
            currentIndex: this.currentIndex,
            iconSize: 30.0,
            type: BottomNavigationBarType.fixed,
            onTap: (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('设置'),
              ),
            ],
          ),
        );
      }
    }
    
    
    效果

    相关文章

      网友评论

          本文标题:Flutter(十四):AppBar

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