Flutter基礎教學：了解元件、屬性和方法的基本概念

一、什麼是Flutter元件？

在 Flutter 中，元件是用於構建用戶界面的基本單位。它們是一種可以重用和組合的小部件，用於構建完整的應用程式界面。每個元件都代表了用戶界面的一個部分，例如按鈕、文本框、圖像等。Flutter 提供了許多內置的元件，同時也允許開發者自定義和擴展這些元件。

例如，讓我們看一下一個簡單的按鈕元件：

import 'package:flutter/material.dart';

class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        // 按鈕點擊後執行的程式碼
      },
      child: Text('點擊我'),
    );
  }
}

在這個例子中，我們定義了一個名為 MyButton 的按鈕元件，它繼承自 StatelessWidget。該元件有一個 build 方法，用於構建並返回按鈕的外觀和行為。這裡使用了內置的 ElevatedButton 元件，並指定了按鈕點擊時要執行的程式碼以及按鈕上顯示的文本。

二、了解Flutter元件的屬性

元件的屬性是用於設置和配置元件外觀和行為的值。它們可以根據需要進行設定，以達到所需的效果。讓我們以一個圖像元件為例：

import 'package:flutter/material.dart';

class MyImage extends StatelessWidget {
  final String imageUrl;
  final double width;
  final double height;

  MyImage({required this.imageUrl, this.width = 200, this.height = 200});

  @override
  Widget build(BuildContext context) {
    return Image.network(
      imageUrl,
      width: width,
      height: height,
      fit: BoxFit.cover,
    );
  }
}

在這個例子中，我們定義了一個名為 MyImage 的圖像元件，它具有三個屬性：imageUrl、width 和 height。其中，imageUrl 屬性用於指定要顯示的圖像的 URL，而 width 和 height 屬性則用於設定圖像的寬度和高度。這些屬性具有默認值，因此在使用時可以根據需要進行自定義。

三、使用Flutter元件的方法

方法是 Flutter 元件中定義的函式，用於執行特定的操作或觸發事件。它們可以用於處理用戶輸入、狀態變化等各種情況。讓我們看一個示例，展示如何在按鈕元件中使用方法：

import 'package:flutter/material.dart';

class MyButton extends StatelessWidget {
  void _handleClick() {
    // 點擊按鈕時執行的程式碼
    print('按鈕被點擊了！');
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: _handleClick,
      child: Text('點擊我'),
    );
  }
}

在這個例子中，我們定義了一個名為 _handleClick 的方法，它在按鈕被點擊時被調用。該方法的功能是在控制台輸出一條消息。在按鈕元件的構建方法中，我們將 _handleClick 方法賦值給 onPressed 屬性，這樣當按鈕被點擊時，該方法就會被執行。