1. 基本介紹

SnackBar 是一個常見的底部消息彈框。

2. 示例代碼

代碼下載地址。如果對你有幫助的話記得給個關(guān)注，代碼會根據(jù)我的 Flutter 專題不斷更新。

3. 屬性介紹

4. SnackBar 詳解

4.1 簡單的 SnackBar

import 'package:flutter/material.dart';

class FMSnackBarVC extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text("SnackBar"),),
      body: ListView(
        children: [
          FMNormalSnackBarBtn(),
        ],
      ),
    );
  }
}

class FMNormalSnackBarBtn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return RaisedButton(
      child: Text("Noraml SnackBar"),
      onPressed: (){
        Scaffold.of(context).showSnackBar(_normalSnackBar());
      },
    );
  }

  SnackBar _normalSnackBar(){
    return SnackBar(
      content: Text("SnackBar"),
      backgroundColor: Colors.grey,
      elevation: 10,
      behavior: SnackBarBehavior.fixed,
      duration: Duration(seconds: 5),
      onVisible: (){
        print("onVisible");
      },
      action: SnackBarAction(
        label: "SnackBarAction",
        textColor: Colors.red,
        disabledTextColor: Colors.green,
        onPressed: (){

        },
      ),
    );
  }
}

SnackBar normal.png

4.2 onVisible鲁冯、SnackBarAction 事件詳解

SnackBar 中有兩處回調(diào)函數(shù)拷沸，一個是 onVisible，另一個就是 SnackBarAction.onPressed薯演。

4.3 顏色樣式

我們新增一個樣式的 Snack撞芍。

class FMSnackBarVC extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text("SnackBar"),),
      body: ListView(
        children: [
          FMNormalSnackBarBtn(),
          FMShapeSnackBarBtn(),
        ],
      ),
    );
  }
}

class FMShapeSnackBarBtn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return RaisedButton(
      child: Text("Shape SnackBar"),
      onPressed: (){
        Scaffold.of(context).showSnackBar(_shapeSnackBar());
      },
    );
  }

  SnackBar _shapeSnackBar(){
    return SnackBar(
      content: Text("SnackBar"),
      backgroundColor: Colors.lightBlueAccent,
      elevation: 10,
      behavior: SnackBarBehavior.floating,
      duration: Duration(seconds: 15),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15),
        side: BorderSide(
          color: Colors.yellow,
          width: 2,
        ),
      ),
      onVisible: (){
        print("onVisible");
      },
      action: SnackBarAction(
        label: "SnackBarAction",
        textColor: Colors.red,
        disabledTextColor: Colors.green,
        onPressed: (){
          print("SnackBarAction.onPressed");
        },
      ),
    );
  }
}

Snack Shape.png

4.4 自定義 content 的 SnackBar

上邊只是簡單的文本消息，這里寫一個復(fù)雜一點(diǎn)的示例跨扮，其實 content 本身就是一個自由的 Widget序无，不用太過古板验毡。

class FMSnackBarVC extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text("SnackBar"),),
      body: ListView(
        children: [
          FMNormalSnackBarBtn(),
          FMShapeSnackBarBtn(),
          FMCustomSnackBarBtn(),
        ],
      ),
    );
  }
}


class FMCustomSnackBarBtn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return RaisedButton(
      child: Text("Custom SnackBar"),
      onPressed: (){
        Scaffold.of(context).hideCurrentSnackBar();
        Scaffold.of(context).showSnackBar(_customSnackBar());
      },
    );
  }

  SnackBar _customSnackBar(){
    return SnackBar(
      content: _content(),
      backgroundColor: Colors.lightBlueAccent,
      elevation: 10,
      behavior: SnackBarBehavior.floating,
      duration: Duration(seconds: 15),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15),
        side: BorderSide(
          color: Colors.yellow,
          width: 2,
        ),
      ),
      onVisible: (){
        print("onVisible");
      },
      action: SnackBarAction(
        label: "SnackBarAction",
        textColor: Colors.red,
        disabledTextColor: Colors.green,
        onPressed: (){
          print("SnackBarAction.onPressed");
        },
      ),
    );
  }

  Widget _content(){
    return Container(
      height: 100,
      child: Row(
        children: [
          Container(
            width: 60,
            child: Image.network('http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg'),
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text("我叫路飛"),
              Text("是要成為海賊王的男人"),
            ],
          ),
        ],
      ),
    );
  }
}

SnackBar customer.png

5. SnackBar 進(jìn)階

SnackBar 的使用其實非常簡單，但是我們來細(xì)究一下他的機(jī)制帝嗡。我們連續(xù)點(diǎn)擊不同彈框晶通，會發(fā)現(xiàn)并不會立即彈出下一個，而是按照 duration 展示每一個 SnackBar哟玷，如果大量調(diào)用狮辽，就會一直在最下方等待彈出，這是肯定沒法接受的巢寡。
（示例中已經(jīng)做了取消 SnackBar 處理喉脖，所以連續(xù)點(diǎn)擊并沒有問題。）

取消彈框有以下兩種方式抑月。

        Scaffold.of(context).hideCurrentSnackBar();
        Scaffold.of(context).removeCurrentSnackBar();

所以建議這么使用动看，showSnackBar 之前，先隱藏當(dāng)前 SnackBar爪幻。

  Widget build(BuildContext context) {
    // TODO: implement build
    return RaisedButton(
      child: Text("Custom SnackBar"),
      onPressed: (){
        Scaffold.of(context).hideCurrentSnackBar();
        // Scaffold.of(context).removeCurrentSnackBar();
        Scaffold.of(context).showSnackBar(_normalSnackBar());
      },
    );
  }

6. 技術(shù)小結(jié)

SnackBar 是一個很簡單的控件，多加練習(xí)吧须误。