開啟Fluter基礎之旅<三>-------Material Design風格組件、Cupertino風格組件、Flutter頁面布局篇

Material Design風格組件：

繼續接着上一次https://www.cnblogs.com/webor2006/p/12545701.html的Material Design進行學習。

AppBar:

在上一次咱們實現一個Tab的效果，回憶一下：

接下來則基於這個代碼進行進一步修改，先回憶一下當時的代碼：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: {'/other': (BuildContext context) => OtherPage()},
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _currentIndex = 0;
  final _widgetOptions = [
    Text('信息'),
    Text('通訊錄'),
    Text('發現'),
    Text('我'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MaterialApp示例'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_currentIndex),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.pushNamed(context, '/other');
        },
        tooltip: '路由跳轉',
        foregroundColor: Color(0xffffffff),
        backgroundColor: Color(0xff000000),
        //陰影
        elevation: 0.0,
        child: Icon(Icons.arrow_forward),
//        shape: RoundedRectangleBorder(),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.message),
            title: Text('信息'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.contacts),
            title: Text('通訊錄'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.near_me),
            title: Text('發現'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_circle),
            title: Text('我'),
          ),
        ],
        currentIndex: _currentIndex,
        type: BottomNavigationBarType.fixed,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}

class OtherPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('OtherPage'),
      ),
    );
  }
}

對於AppBar其實還有其它屬性，下面來看一下：

leading：左圖標：

效果：

elevation：陰影控制

仔細瞅一下，其實默認標題欄下面是有陰影的，如下：

其實它是由elevation屬性來控制的，默認看一下它陰影大小設置是的？

如果想去掉陰影將其設置為0既可，如下：

actions：右側的操作按鈕

drawer：側滑抽屜組件

此時抽屜里還木有填充內容，先看一下效果：

UserAccountsDrawerHeader:展示用戶頭像、用戶名、Email等信息

通常在側滑時頂部都是展現用戶的基本信息的，而Flutter基於這種場景提供有專門的組件，下面來使用一下：

otherAccountsPicture：用來設置當前用戶其他賬號的圖標

decoration：通常用來設置背景顏色或背景圖片

currentAccountPicture：用來設置當前用戶的頭像

增加菜單項：

AboutListTile：關於

對話框：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MaterialApp dialog示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SimpleDialog(
              title: Text('title'),
              children: <Widget>[
                SimpleDialogOption(
                  child: Text('選擇1'),
                  onPressed: () {
                    print('選擇1');
                  },
                ),
                SimpleDialogOption(
                  child: Text('選擇2'),
                  onPressed: () {
                    print('選擇2');
                  },
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

運行：

這里再弄一個Button，點擊再顯示對話框：

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MaterialApp dialog示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SimpleDialog(
              title: Text('title'),
              children: <Widget>[
                SimpleDialogOption(
                  child: Text('選擇1'),
                  onPressed: () {
                    print('選擇1');
                  },
                ),
                SimpleDialogOption(
                  child: Text('選擇2'),
                  onPressed: () {
                    print('選擇2');
                  },
                ),
              ],
            ),
            RaisedButton(
              child: Text('刪除'),
              onPressed: () {
                showDialog(
                    context: context,
                    builder: (BuildContext context) {
                      return AlertDialog(
                        title: Text("title"),
                        content: SingleChildScrollView(
                          child: ListBody(
                            children: <Widget>[
                              Text('是否刪除?'),
                              Text('刪除后不可恢復!'),
                            ],
                          ),
                        ),
                        actions: <Widget>[
                          FlatButton(
                            child: Text('確定'),
                            onPressed: () {
                              Navigator.of(context).pop(); //取消對話框
                            },
                          ),
                          FlatButton(
                            child: Text('取消'),
                            onPressed: () {
                              Navigator.of(context).pop(); //取消對話框
                            },
                          )
                        ],
                      );
                    });
              },
            )
          ],
        ),
      ),
    );
  }
}

Card（卡片組件）：

接下來添加一些點贊操作：

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MaterialApp card示例'),
      ),
      body: ListView(
        children: <Widget>[
          Card(
            child: Column(
              children: <Widget>[
                Image.asset(
                  'assets/images/test.jpg',
                  //寬度充滿屏幕
                  width: double.infinity,
                  height: 150.0,
                  //充滿寬高
                  fit: BoxFit.cover,
                ),
                Row(
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.all(10.0),
                      child: Container(
                        child: Icon(Icons.home),
                      ),
                    ),
                    Expanded(
                      //整個文本填滿
                      child: Column(
                        children: <Widget>[
                          Text(
                            'test',
                            style: TextStyle(fontSize: 22.0),
                          ),
                          Text(
                            '500',
                            style: TextStyle(fontSize: 14.0),
                          ),
                        ],
                      ),
                    ),
                    Container(
                      child: Column(
                        children: <Widget>[
                          Icon(
                            Icons.favorite,
                            color: Colors.red,
                          ),
                          Text('66'),
                        ],
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Cupertino風格組件：

Cupertino風格組件即IOS風格組件。主要有CupertinoTabBar、CupertinoPageScaffold、CupertinoTabScaffold、CupertinoTabView等。目前組件庫還沒有Material Design風格組件豐富。

CupertinoButton：

CupertinoAlertDialog：

與Material Design風格的AlertDialog類似。

Loading：

CupertinoTabBar&CupertinoNavigationBar：導航欄

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'cupertino_tabbar',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text("首頁"),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.message),
            title: Text("消息"),
          ),
        ],
      ),
      tabBuilder: (context, index) {
        return CupertinoTabView(
          builder: (context) {
            switch (index) {
              case 0:
                return MyHome();
              case 1:
                return MyMessage();
            }
          },
        );
      },
    );
  }
}

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      //ios風格導航欄
      navigationBar: CupertinoNavigationBar(
        middle: Text('主頁'),
        //ios風格的圖標
        leading: Icon(CupertinoIcons.back),
        trailing: Icon(CupertinoIcons.search),
      ),
      child: Center(
        child: Text('主頁'),
      ),
    );
  }
}

class MyMessage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      //ios風格導航欄
      navigationBar: CupertinoNavigationBar(
        middle: Text('消息'),
        //ios風格的圖標
        leading: Icon(CupertinoIcons.back),
        trailing: Icon(CupertinoIcons.search),
      ),
      child: Center(
        child: Text('消息'),
      ),
    );
  }
}

運行：

Flutter頁面布局篇：

關於頁面布局其實在之前使用中已經接觸了很多了，關於布局這塊在Flutter中有如下內容：

 

 

已經使用過的就不多說了，這里再挑幾個沒有用到過的但是未來會用到的進行學習。

Align(對齊布局)：

將子組件按指定方式對齊，並根據子組件的大小調整自己的大小。

默認是居中的，接下來則可以指定子組件的對齊方式：

 

Stack：

它可以理解成Android中的FrameLayout，它通常會結合Alignment和Positioned來使用，像平常未讀消息氣泡布局就比較適合用它，下面來用一下：

Stack&Positioned：

Stack&Alignment：

貌似這個小紅點得要再移出一點，這里可以這樣調整：

就是讓x軸往正方向（正數）再出一點，而y軸方向得往反方向（負數）再出一點，如下：

IndexedStack：

繼承自Stack：

用於顯示第index個child，其他child不可見，所以它的尺寸與child中最大尺寸一致。

下面寫一個動態切換child的效果：

運行：