你知道嗎，Flutter內置了10多種show

時間  2020-03-25
標籤 知道 flutter 內置 多種 简体版
原文   原文鏈接

注意：無特殊說明，Flutter版本及Dart版本以下：ios

  • Flutter版本： 1.12.13+hotfix.5
  • Dart版本： 2.7.0

showDialog

showDialog 用於彈出Material風格對話框，基本用法以下：git

showDialog(
    context: context,
    builder: (context) {
      return AlertDialog(
        ...
      );
    }
);複製代碼

效果以下：程序員

builder一般返回Dialog組件，好比SimpleDialog和AlertDialog。微信

useRootNavigator參數用於肯定是否將對話框推送到給定「context」最遠或最接近的Navigator。默認狀況下，useRootNavigator爲「true」，被推送到根Navigator。若是應用程序有多個Navigator，關閉對話框須要使用app

Navigator.of(context, rootNavigator: true).pop(result)複製代碼

而不是dom

Navigator.pop(context, result)複製代碼

barrierDismissible參數確認點擊提示框外部區域時是否彈出提示框，默認true。ide

showCupertinoDialog

showCupertinoDialog 用於彈出ios風格對話框，基本用法以下：學習

showCupertinoDialog(
    context: context,
    builder: (context) {
      return CupertinoAlertDialog(
       ...
      );
    });複製代碼

效果以下：動畫

builder一般返回CupertinoDialog或者CupertinoAlertDialog。ui

showGeneralDialog

若是上面2種提示框不知足你的需求，還可使用showGeneralDialog自定義提示框，事實上，showDialog和showCupertinoDialog也是經過showGeneralDialog實現的，基本用法以下：

showGeneralDialog(
    context: context,
    barrierDismissible:true,
    barrierLabel: '',
    transitionDuration: Duration(milliseconds: 200),
    pageBuilder: (BuildContext context, Animation<double> animation,
        Animation<double> secondaryAnimation) {
      return Center(
        child: Container(
          height: 300,
          width: 250,
          color: Colors.lightGreenAccent,
        ),
      );
    });複製代碼

效果以下：

加上背景顏色：

showGeneralDialog(
    context: context,
    barrierColor: Colors.black.withOpacity(.5),
    ...
  )複製代碼

效果以下：

barrierDismissible:是否能夠點擊背景關閉。

barrierColor：背景顏色

transitionDuration：動畫時長，

transitionBuilder是構建進出動畫，默認動畫是漸隱漸顯，構建縮放動畫代碼以下：

showGeneralDialog(
    transitionBuilder: (BuildContext context, Animation<double> animation,
        Animation<double> secondaryAnimation, Widget child) {
      return ScaleTransition(scale: animation, child: child);
    },
    ...
  )複製代碼

效果以下：

showAboutDialog

AboutDialog用於描述當前App信息，底部提供2個按鈕：查看許可按鈕和關閉按鈕。AboutDialog須要和showAboutDialog配合使用，用法以下：

showAboutDialog(
  context: context,
  applicationIcon: Image.asset(
    'images/bird.png',
    height: 100,
    width: 100,
  ),
  applicationName: '應用程序',
  applicationVersion: '1.0.0',
  applicationLegalese: 'copyright 老孟，一枚有態度的程序員',
  children: <Widget>[
    Container(
      height: 30,
      color: Colors.red,
    ),
    Container(
      height: 30,
      color: Colors.blue,
    ),
    Container(
      height: 30,
      color: Colors.green,
    )
  ],
);複製代碼

效果以下：

屬性說明以下：

  • applicationIcon：應用程序的圖標。
  • applicationName：應用程序名稱。
  • applicationVersion：應用程序版本。
  • applicationLegalese：著做權（copyright）的提示。
  • children：位置如上圖的紅藍綠色的位置。

全部的屬性都須要手動設置，不是自動獲取的。

下面的2個按鈕根據應用程序支持的語言顯示相應的語言，好比顯示中文方法以下：

  1. 在pubspec.yaml中配置支持國際化：
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter複製代碼
  1. 在MaterialApp中配置當前區域：
MaterialApp(
      title: 'Flutter Demo',
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('zh', 'CH'),
        const Locale('en', 'US'),
      ],
      locale: Locale('zh'),
      ...
  )複製代碼

此時效果：

此時點擊查看許將會調用showLicensePage,相關效果能夠查看showLicensePage。

showLicensePage

此控件基本不會用到，瀏覽一下便可。

LicensePage用於描述當前App許可信息，LicensePage須要和showLicensePage配合使用，用法以下：

showLicensePage(
  context: context,
  applicationIcon: Image.asset(
    'images/bird.png',
    height: 100,
    width: 100,
  ),
  applicationName: '應用程序',
  applicationVersion: '1.0.0',
  applicationLegalese: 'copyright 老孟，一枚有態度的程序員',
);複製代碼

效果以下：

下面的英文咱們是沒法更改的。

showBottomSheet

在最近的Scaffold父組件上展現一個material風格的bottom sheet，位置同Scaffold組件的bottomSheet，若是Scaffold設置了bottomSheet，調用showBottomSheet拋出異常。

基本用法以下：

showBottomSheet(
    context: context,
    builder: (context) {
      return Container(height: 200, color: Colors.lightBlue);
    });複製代碼

效果以下：

設置其背景顏色、陰影值、形狀：

showBottomSheet(
    context: context,
    backgroundColor: Colors.lightGreenAccent,
    elevation:20,
    shape: CircleBorder(),
    builder: (context) {
      return Container(height: 200);
    });複製代碼

效果以下：

一般狀況下，咱們但願直接從底部彈出，showModalBottomSheet提供了直接從底部彈出的功能。

showModalBottomSheet

從底部彈出，一般和BottomSheet配合使用，用法以下：

showModalBottomSheet(
        context: context,
        builder: (BuildContext context) {
          return BottomSheet(...);
        });複製代碼

效果以下：

設置背景、陰影、形狀：

showModalBottomSheet(
    context: context,
    backgroundColor: Colors.lightBlue,
    elevation: 10,
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30)),
    ...
  )複製代碼

效果以下：

isDismissible:是否能夠點擊背景關閉。

isScrollControlled參數指定是否使用可拖動的可滾動的組件，若是子組件是ListView或者GridView，此參數應該設置爲true，設置爲true後，最大高度能夠佔滿全屏。用法以下：

showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    builder: (BuildContext context) {
      return ListView.builder(
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('老孟$index'),
          );
        },
        itemExtent: 50,
        itemCount: 50,
      );
    });複製代碼

showCupertinoModalPopup

showCupertinoModalPopup 展現ios的風格彈出框，一般狀況下和CupertinoActionSheet配合使用，用法以下：

showCupertinoModalPopup(
    context: context,
    builder: (BuildContext context) {
      return CupertinoActionSheet(
        title: Text('提示'),
        message: Text('是否要刪除當前項？'),
        actions: <Widget>[
          CupertinoActionSheetAction(
            child: Text('刪除'),
            onPressed: () {},
            isDefaultAction: true,
          ),
          CupertinoActionSheetAction(
            child: Text('暫時不刪'),
            onPressed: () {},
            isDestructiveAction: true,
          ),
        ],
      );
    }
);複製代碼

效果以下：

filter參數能夠對彈出框之外的區域作模糊或者矩陣操做，用法以下：

showCupertinoModalPopup(
    context: context,
    filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
    ...
  )複製代碼

效果以下：

彈出框之外的區域有毛玻璃的效果。

showMenu

showMenu彈出一個Menu菜單，用法以下：

showMenu(
    context: context,
    position: RelativeRect.fill,
    items: <PopupMenuEntry>[
      PopupMenuItem(child: Text('語文')),
      PopupMenuDivider(),
      CheckedPopupMenuItem(
        child: Text('數學'),
        checked: true,
      ),
      PopupMenuDivider(),
      PopupMenuItem(child: Text('英語')),
    ]);複製代碼

position參數表示彈出的位置，效果以下：

彈出的位置在屏幕的左上角，咱們但願彈出的位置在點擊按鈕的位置，所以須要計算按鈕的位置，計算以下：

final RenderBox button = context.findRenderObject();
final RenderBox overlay = Overlay.of(context).context.findRenderObject();
final RelativeRect position = RelativeRect.fromRect(
  Rect.fromPoints(
    button.localToGlobal(Offset(0, 0), ancestor: overlay),
    button.localToGlobal(button.size.bottomRight(Offset.zero),
        ancestor: overlay),
  ),
  Offset.zero & overlay.size,
);複製代碼

你須要將按鈕單獨封裝爲StatefulWidget組件，不然context表明的就不是按鈕組件。

showSearch

showSearch 是直接跳轉到搜索頁面，用法以下：

showSearch(context: context, delegate: CustomSearchDelegate());

class CustomSearchDelegate extends SearchDelegate<String>{
  @override
  List<Widget> buildActions(BuildContext context) {
    return null;
  }

  @override
  Widget buildLeading(BuildContext context) {
    return null;
  }

  @override
  Widget buildResults(BuildContext context) {
    return null;
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    return null;
  }

}複製代碼

使用showSearch，首先須要重寫一個SearchDelegate，實現其中的4個方法。

buildLeading表示構建搜索框前面的控件，通常是一個返回按鈕，點擊退出，代碼以下：

@override
Widget buildLeading(BuildContext context) {
  return IconButton(
    icon: Icon(Icons.arrow_back,color: Colors.blue,),
    onPressed: (){
      close(context, '');
    },
  );
}複製代碼

效果以下：

buildSuggestions是用戶正在輸入時顯示的控件，輸入框放生變化時回調此方法，一般返回一個ListView，點擊其中一項時，將當前項的內容填充到輸入框，用法以下：

@override
Widget buildSuggestions(BuildContext context) {
  return ListView.separated(
    itemBuilder: (context, index) {
      return ListTile(
        title: Text('老孟 $index'),
        onTap: () {
          query = '老孟 $index';
        },
      );
    },
    separatorBuilder: (context, index) {
      return Divider();
    },
    itemCount: Random().nextInt(5),
  );
}複製代碼

效果以下：

buildActions輸入框後面的控件，通常狀況下，輸入框不爲空，顯示一個清空按鈕，點擊清空輸入框：

@override
List<Widget> buildActions(BuildContext context) {
  return [
    IconButton(
      icon: Icon(
        Icons.clear,
      ),
      onPressed: () {
        query = '';
      },
    )
  ];
}複製代碼

buildResults是構建搜索結果控件，當用戶點擊軟鍵盤上的「Search」時回調此方法，通常返回ListView，用法以下：

@override
Widget buildResults(BuildContext context) {
  return ListView.separated(
    itemBuilder: (context, index) {
      return Container(
        height: 60,
        alignment: Alignment.center,
        child: Text(
          '$index',
          style: TextStyle(fontSize: 20),
        ),
      );
    },
    separatorBuilder: (context, index) {
      return Divider();
    },
    itemCount: 10,
  );
}複製代碼

效果以下：

歡迎加入Flutter的微信交流羣(laomengit)，一塊兒學習，一塊兒進步，生活不止眼前的苟且，還有詩和《遠方》。

固然我也很是但願您關注我我的的公衆號，裏面有各類福利等着你們哦。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程