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')),
            ],
          ),
        );
      }
    }
    
  • 相关阅读:
    Spring Boot 返回 XML 数据,一分钟搞定!
    Spring Cloud Alibaba Sentinel 整合 Feign 的设计实现
    周末去面试,进去 5 分钟就出来了…
    Spring Boot 返回 JSON 数据,一分钟搞定!
    Java 11 已发布,String 还能这样玩!
    Hashtable 为什么不叫 HashTable?
    Java 中初始化 List 集合的 6 种方式!
    HashMap 和 Hashtable 的 6 个区别,最后一个没几个人知道!
    毕业不到一年,绩效打了个D!
    poj 3111 K Best (二分搜索之最大化平均值之01分数规划)
  • 原文地址:https://www.cnblogs.com/ajanuw/p/10884864.html
Copyright © 2011-2022 走看看