您好,登錄后才能下訂單哦!
注意:無(wú)特殊說(shuō)明,F(xiàn)lutter版本及Dart版本如下:
- Flutter版本: 1.12.13+hotfix.5
- Dart版本: 2.7.0
當(dāng)應(yīng)用程序進(jìn)行重要操作時(shí)經(jīng)常需要用戶進(jìn)行2次確認(rèn),以避免用戶的誤操作,比如刪除文件時(shí),一般會(huì)彈出提示“是否要?jiǎng)h除當(dāng)前文件”,用戶點(diǎn)擊確認(rèn)后才會(huì)進(jìn)行刪除操作,這時(shí)我們可以使用提示框(AlertDialog或者CupertinoAlertDialog)。
根據(jù)設(shè)計(jì)的不同,我們可以選擇Material風(fēng)格的AlertDialog或者Cupertino(ios)風(fēng)格的CupertinoAlertDialog,
Material風(fēng)格基礎(chǔ)用法如下:
RaisedButton(
child: Text('切換'),
onPressed: () {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text('提示'),
content: Text('確認(rèn)刪除嗎?'),
actions: <Widget>[
FlatButton(child: Text('取消'),onPressed: (){},),
FlatButton(child: Text('確認(rèn)'),onPressed: (){},),
],
);
});
},
)
Material風(fēng)格效果:
Cupertino(ios)風(fēng)格基礎(chǔ)用法如下:
RaisedButton(
child: Text('切換'),
onPressed: () {
showCupertinoDialog(
context: context,
builder: (context) {
return CupertinoAlertDialog(
title: Text('提示'),
content: Text('確認(rèn)刪除嗎?'),
actions: <Widget>[
CupertinoDialogAction(child: Text('取消'),onPressed: (){},),
CupertinoDialogAction(child: Text('確認(rèn)'),onPressed: (){},),
],
);
});
},
)
Cupertino(ios)風(fēng)格效果如下:
showDialog
和
AlertDialog
配合使用展示Material風(fēng)格對(duì)話框,
showCupertinoDialog
和
CupertinoAlertDialog
配合使用展示iOS風(fēng)格對(duì)話框,
showCupertinoDialog
點(diǎn)擊空白處是無(wú)法退出對(duì)話框的,而
showDialog
點(diǎn)擊空白處默認(rèn)退出對(duì)話框,
barrierDismissible
屬性控制點(diǎn)擊空白處的行為,用法如下:
showDialog(
barrierDismissible: false,
)
AlertDialog的屬性相對(duì)比較豐富,可以設(shè)置title樣式、content樣式、背景顏色、陰影值,設(shè)置是形狀:
AlertDialog(
title: Text('提示'),
content: Text('確認(rèn)刪除嗎?'),
backgroundColor: Colors.lightBlueAccent,
elevation: 24,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(50)),
actions: <Widget>[
FlatButton(child: Text('取消'),onPressed: (){},),
FlatButton(child: Text('確認(rèn)'),onPressed: (){},),
],
)
用戶點(diǎn)擊“取消”或者“確定”按鈕后退出對(duì)話框,App需要知道知道用戶選擇了哪個(gè)選項(xiàng),用法如下:
RaisedButton(
child: Text('切換'),
onPressed: () async {
var result = await showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text('提示'),
content: Text('確認(rèn)刪除嗎?'),
actions: <Widget>[
FlatButton(
child: Text('取消'),
onPressed: () {
Navigator.of(context).pop('cancel');
},
),
FlatButton(
child: Text('確認(rèn)'),
onPressed: () {
Navigator.of(context).pop('ok');
},
),
],
);
});
print('$result');
},
)
如果你覺(jué)得系統(tǒng)提供的這2個(gè)風(fēng)格的對(duì)話框不夠個(gè)性,你可以試試SimpleDialog,用法和AlertDialog基本相同,如下:
SimpleDialog(
title: Text('提示'),
children: <Widget>[
Container(
height: 80,
alignment: Alignment.center,
child: Text('確認(rèn)刪除嗎?'),
),
Divider(height: 1,),
FlatButton(
child: Text('取消'),
onPressed: () {
Navigator.of(context).pop('cancel');
},
),
Divider(height: 1,),
FlatButton(
child: Text('確認(rèn)'),
onPressed: () {
Navigator.of(context).pop('ok');
},
),
],
)
效果如下:
如果你覺(jué)得這還是不夠個(gè)性,那可以祭出終極大招了,直接使用Dialog,Dialog可以定制任何對(duì)話框,只需將對(duì)話框的內(nèi)容給child屬性:
Dialog(
child: MyDialog(),
);
當(dāng)然一般情況下,系統(tǒng)提供的對(duì)話框就夠用了,這幾個(gè)對(duì)話框組件用法基本一樣,不同的地方僅僅是靈活性和使用簡(jiǎn)易程度的不要,Dialog最靈活,但使用起來(lái)比AlertDialog復(fù)雜一些,AlertDialog使用起來(lái)非常簡(jiǎn)單,但布局和基本樣式都已經(jīng)固定好,不如Dialog靈活。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。