Flutter AlertDialog

Flutter提供了許多小部件，其中一個重要的小部件是AlertDialog。AlertDialog可以顯示警告、確認、信息等用戶操作的對話框。它在用戶操作時會彈出並要求對話框上的一些操作。在本文中，我們將深入探討Flutter AlertDialog，涵蓋各個方面。

一、基本用法

要顯示AlertDialog，您需要在build方法中創建一個AlertDialog並將其包裹在showDialog方法中。AlertDialog包含標題、內容和操作按鈕。

showDialog(
  context: context,
  builder: (context) {
    return AlertDialog(
      title: Text('Title'),
      content: Text('Content'),
      actions: [
        FlatButton(
          child: Text('Cancel'),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
        FlatButton(
          child: Text('OK'),
          onPressed: () {
            //Do something
          },
        ),
      ],
    );
  },
);

在上面的代碼中，我們創建了一個AlertDialog，其中包含一個標題和一個內容，以及兩個操作按鈕，即取消和確定按鈕。該對話框將在用戶點擊觸發時彈出，一旦用戶點擊操作按鈕，它將執行相應的操作並關閉對話框。

二、自定義AlertDialog

Flutter AlertDialog具有可自定義的樣式和布局，您可以根據用戶需求對其進行修改。如果您需要自定義AlertDialog，則可以在數學中使用AlertDialog的任何一部分，例如：標題、內容和操作按鈕等。

以下示例說明如何更改AlertDialog的顏色及其內容和操作按鈕的位置。

showDialog(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(
      backgroundColor: Colors.pinkAccent,
      content: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              width: double.infinity,
              color: Colors.white,
              child: Text(
                'Title',
                style: TextStyle(
                  color: Colors.black,
                  fontSize: 20.0,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            SizedBox(height: 10),
            Container(
              width: double.infinity,
              color: Colors.white,
              child: Text(
                'Content',
                style: TextStyle(
                  color: Colors.black,
                  fontSize: 18.0,
                ),
              ),
            ),
          ],
        ),
      ),
      actions: [
        FlatButton(
          child: Text(
            'Cancel',
            style: TextStyle(
              color: Colors.white,
              fontSize: 20.0,
            ),
          ),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
        FlatButton(
          child: Text(
            'OK',
            style: TextStyle(
              color: Colors.white,
              fontSize: 20.0,
            ),
          ),
          onPressed: () {
            // Do Something
          },
        ),
      ],
    );
  },
);

在上面的代碼中，我們創建了一個AlertDialog，其中自定義了背景顏色、標題、內容和操作按鈕的樣式。標題和內容被放置在Container中，以便使其與操作按鈕分開。Buttons也可以定製為所需的樣式。

三、常用AlertDialog

AlertDialog通常用於警告、確認、信息等。在這裡，我們將覆蓋幾個常見的警告和確認AlertDialog。

1. 警告AlertDialog

下面的示例向用戶顯示警告AlertDialog：

showDialog(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(
      title: Text('Warning'),
      content: Text('Are you sure?'),
      actions: [
        FlatButton(
          child: Text('Cancel'),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
        FlatButton(
          child: Text('Delete'),
          onPressed: () {
            // Do Something
          },
        ),
      ],
    );
  },
);

2. 確認AlertDialog

下面的示例向用戶顯示確認AlertDialog：

showDialog(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(
      title: Text('Confirm'),
      content: Text('Are you sure?'),
      actions: [
        FlatButton(
          child: Text('Cancel'),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
        FlatButton(
          child: Text('OK'),
          onPressed: () {
            // Do Something
          },
        ),
      ],
    );
  },
);

四、結論

這是Flutter AlertDialog的詳細介紹，我們涵蓋了以下內容：

• 基本用法
• 自定義AlertDialog
• 常見AlertDialog

根據這篇文章，您應該能夠構建自定義的AlertDialog並了解如何使用它們來警告、確認、信息等。