Flutter——OKToast的使用

江湖救急發表於2019-09-17
FlutterAST

OKToast 是一款 在 flutter 上 使用的 toast 外掛,使用簡單, 可定製性強, 純 flutter, 呼叫不用 context.

外掛文件:pub.dev/packages/ok…

一：基本使用

1,新增依賴

dependencies:
  oktoast: ^2.2.0
複製程式碼

2,獲取依賴包

flutter pub get
複製程式碼

3,匯入到需要使用的檔案中

import 'package:oktoast/oktoast.dart';
複製程式碼

4,main.dart中，在MaterialApp外面套一層OKToast元件

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return OKToast(
      dismissOtherOnShow: true,
      child: MaterialApp(
        title: 'FlutterUI學習',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primarySwatch: Colors.red,
        ),
        home: DemoApp(),
      ),
    );
  }
}
複製程式碼

5,在介面中新增按鈕，點選按鈕測試,如下圖所示

Flutter——OKToast的使用

二:自定義Toast

1,彈出自定義訊息框,在介面建立一個自定義按鈕，用來觸發自定義訊息框

class MyOkToast extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(10.0),
      child: Column(
        children: <Widget>[
          RaisedButton(onPressed: (){showToast("hello");},child: Text("showToast")),
          RaisedButton(onPressed: (){showToastWidget(CorrectToast());},child: Text("自定義Toast")),
        ],
      ),
    );
  }
}複製程式碼

2,新建自定義訊息框元件 CorrectToast 

class CorrectToast extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 140,
      height: 140,
      color: Colors.green,
      child: Image.asset("images/right.png"),
    );
  }

}複製程式碼

3,點選按鈕測試

Flutter——OKToast的使用


三，其他

a,手動隱藏Toast

dismissAllToast();
複製程式碼

b,在顯示 toast 時隱藏之前顯示的所有 toast

showToast("hello", dismissOtherToast: true);
複製程式碼

c,全域性設定彈出toast之前隱藏已經顯示的toast

OKToast(
  dismissOtherOnShow: true,
  ...
)
複製程式碼

d,隱藏單獨的toast

var future = showToast("hello");
future.dismiss(); // 隱藏指定的toast
複製程式碼

e,屬性註釋

backgroundColor: 背景顏色

duration: 延遲隱藏時間

onDismiss: 隱藏時的回撥

position: toast 的位置

radius: 圓角的尺寸

textAlign: 文字在內部的對齊方式

textDirection: ltr 或 rtl

textPadding: 文字距離邊框的 padding

textStyle: 文字的樣式

複製程式碼


相關文章