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')),
            ],
          ),
        );
      }
    }
    
  • 相关阅读:
    IL指令列表
    [译].Net中的内存-什么分配在了哪里
    C#中的可空类型
    深入C#并行编程(2) -- 使用线程
    C#自动内存分配
    在C#中使用Json.Net进行序列化和反序列化及定制化
    ASP.NET获取客户端、服务器端基础信息
    MongoDB随笔
    MongoDB.Driver 管道 Aggregate
    MongoDB centos安装问题 error while loading shared libraries: libnetsnmpmibs.so.31
  • 原文地址:https://www.cnblogs.com/ajanuw/p/10884864.html
Copyright © 2011-2022 走看看