zoukankan      html  css  js  c++  java
  • Flutter 创建dashboard页面

    1

    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: DashPage(),
        );
      }
    }
    
    class DashPage extends StatefulWidget {
      @override
      _DashPageState createState() => _DashPageState();
    }
    
    class _DashPageState extends State<DashPage> {
      @override
      Widget build(BuildContext context) {
        return DefaultTabController(
          length: 4,
          child: Scaffold(
            bottomNavigationBar: TabBar(
              tabs: <Widget>[
                Tab(icon: Icon(Icons.home), text: "Home"),
                Tab(icon: Icon(Icons.search), text: "Search"),
                Tab(icon: Icon(Icons.file_download), text: "Download"),
                Tab(icon: Icon(Icons.list), text: "More"),
              ],
              unselectedLabelColor: Colors.grey, // 未选中时的颜色
              labelColor: Colors.blue, // 选中时的颜色
            ),
            body: TabBarView(
              children: <Widget>[
                Center(child: Text('Home Page')),
                Center(child: Text('Search Page')),
                Center(child: Text('Download Page')),
                Center(child: Text('More Page')),
              ],
            ),
          ),
        );
      }
    }
    

    2

    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: DashPage(),
        );
      }
    }
    
    class DashPage extends StatefulWidget {
      @override
      _DashPageState createState() => _DashPageState();
    }
    
    class _DashPageState extends State<DashPage> {
      int _currentIndex = 0;
      final PageController _controller = PageController();
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          bottomNavigationBar: BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            currentIndex: _currentIndex,
            fixedColor: Colors.purple,
            onTap: (int index) {
              setState(() {
                _currentIndex = index;
                _controller.jumpToPage(index);
              });
            },
            items: <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                  icon: Icon(Icons.home),
                  activeIcon: Icon(Icons.home),
                  title: Text("Home")),
              BottomNavigationBarItem(
                  icon: Icon(Icons.search),
                  activeIcon: Icon(Icons.search),
                  title: Text("Search")),
              BottomNavigationBarItem(
                  icon: Icon(Icons.file_download),
                  activeIcon: Icon(Icons.file_download),
                  title: Text("Search")),
              BottomNavigationBarItem(
                  icon: Icon(Icons.list),
                  activeIcon: Icon(Icons.list),
                  title: Text("More")),
            ],
          ),
          body: PageView(
            controller: _controller,
            onPageChanged: (int index) {
              setState(() {
                _currentIndex = index;
              });
            },
            children: <Widget>[
              Center(child: Text('Home Page')),
              Center(child: Text('Search Page')),
              Center(child: Text('Download Page')),
              Center(child: Text('More Page')),
            ],
          ),
        );
      }
    }
    
  • 相关阅读:
    poj 3278 catch that cow
    POJ 1028 Web Navigation
    poj 2643 election
    hdu 1908 double queues
    hdu_2669 Romantic(扩展欧几里得)
    0/1背包 dp学习~6
    校验码
    最长上升子序列(LIS经典变型) dp学习~5
    LCS最长公共子序列~dp学习~4
    最长上升子序列(LIS) dp学习~3
  • 原文地址:https://www.cnblogs.com/ajanuw/p/10884864.html
Copyright © 2011-2022 走看看