Flutter系列文章-Flutter UI進階_ZenDei技術網路在線

在本篇文章中，我們將深入學習 Flutter UI 的進階技巧，涵蓋了佈局原理、動畫實現、自定義繪圖和效果、以及 Material 和 Cupertino 組件庫的使用。通過實例演示，你將更加瞭解如何創建複雜、令人印象深刻的用戶界面。 ...

在本篇文章中，我們將深入學習 Flutter UI 的進階技巧，涵蓋了佈局原理、動畫實現、自定義繪圖和效果、以及 Material 和 Cupertino 組件庫的使用。通過實例演示，你將更加瞭解如何創建複雜、令人印象深刻的用戶界面。

第一部分：深入理解佈局原理

1. 靈活運用 Row 和 Column

Row 和 Column 是常用的佈局組件，但靈活地使用它們可以帶來不同的佈局效果。例如，使用 mainAxisAlignment 和 crossAxisAlignment 可以控制子組件在主軸和交叉軸上的對齊方式。

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Container(width: 50, height: 50, color: Colors.red),
    Container(width: 50, height: 50, color: Colors.green),
    Container(width: 50, height: 50, color: Colors.blue),
  ],
)

2. 彈性佈局 Flex 和 Expanded

Flex 和 Expanded 可以用於實現彈性佈局，讓組件占據可用空間的比例。例如，下麵的代碼將一個藍色容器占據兩倍寬度的空間。

Row(
  children: [
    Container(width: 50, height: 50, color: Colors.red),
    Expanded(
      flex: 2,
      child: Container(height: 50, color: Colors.blue),
    ),
  ],
)

第二部分：動畫和動效實現

1. 使用 AnimatedContainer

AnimatedContainer 可以實現在屬性變化時自動產生過渡動畫效果。例如，以下代碼在點擊時改變容器的寬度和顏色。

class AnimatedContainerExample extends StatefulWidget {
  @override
  _AnimatedContainerExampleState createState() => _AnimatedContainerExampleState();
}

class _AnimatedContainerExampleState extends State<AnimatedContainerExample> {
  double _width = 100;
  Color _color = Colors.blue;

  void _animateContainer() {
    setState(() {
      _width = _width == 100 ? 200 : 100;
      _color = _color == Colors.blue ? Colors.red : Colors.blue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _animateContainer,
      child: AnimatedContainer(
        width: _width,
        height: 100,
        color: _color,
        duration: Duration(seconds: 1),
        curve: Curves.easeInOut,
      ),
    );
  }
}

2. 使用 Hero 動畫

Hero 動畫可以在頁面切換時產生平滑的過渡效果。在不同頁面中使用相同的 tag，可以讓兩個頁面之間的共用元素過渡更加自然。

class PageA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        Navigator.of(context).push(MaterialPageRoute(
          builder: (context) => PageB(),
        ));
      },
      child: Hero(
        tag: 'avatar',
        child: CircleAvatar(
          radius: 50,
          backgroundImage: AssetImage('assets/avatar.jpg'),
        ),
      ),
    );
  }
}

class PageB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Hero(
          tag: 'avatar',
          child: CircleAvatar(
            radius: 150,
            backgroundImage: AssetImage('assets/avatar.jpg'),
          ),
        ),
      ),
    );
  }
}

第三部分：自定義繪圖和效果

1. 使用 CustomPaint 繪製圖形

CustomPaint 允許你自定義繪製各種圖形和效果。以下是一個簡單的例子，繪製一個帶邊框的矩形。

class CustomPaintExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: RectanglePainter(),
      child: Container(),
    );
  }
}

class RectanglePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2;

    canvas.drawRect(Rect.fromLTWH(50, 50, 200, 100), paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

第四部分：Material 和 Cupertino 組件庫

1. 使用 Material 組件

Material 組件庫提供了一系列符合 Material Design 規範的 UI 組件。例如，AppBar、Button、Card 等。以下是一個使用 Card 的例子。

Card(
  elevation: 4,
  child: ListTile(
    leading: Icon(Icons.account_circle),
    title: Text('John Doe'),
    subtitle: Text('Software Engineer'),
    trailing: Icon(Icons.more_vert),
  ),
)

2. 使用 Cupertino 組件

Cupertino 組件庫提供了 iOS 風格的 UI 組件，適用於 Flutter 應用在 iOS 平臺上的開發。例如，CupertinoNavigationBar、CupertinoButton 等。

dart
Copy code
CupertinoNavigationBar(
middle: Text('Cupertino Example'),
trailing: CupertinoButton(
child: Text('Done'),
onPressed: () {},
),
)

第五部分：綜合實例

以下是一個更加綜合的例子，涵蓋了之前提到的佈局、動畫、自定義繪圖和 Material/Cupertino 組件庫的知識點。

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ExampleScreen(),
    );
  }
}

class ExampleScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Advanced UI Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            AnimatedRotateExample(),
            SizedBox(height: 20),
            CustomPaintExample(),
            SizedBox(height: 20),
            PlatformWidgetsExample(),
          ],
        ),
      ),
    );
  }
}

class AnimatedRotateExample extends StatefulWidget {
  @override
  _AnimatedRotateExampleState createState() => _AnimatedRotateExampleState();
}

class _AnimatedRotateExampleState extends State<AnimatedRotateExample> {
  double _rotation = 0;

  void _startRotation() {
    Future.delayed(Duration(seconds: 1), () {
      setState(() {
        _rotation = 45;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        GestureDetector(
          onTap: () {
            _startRotation();
          },
          child: AnimatedBuilder(
            animation: Tween<double>(begin: 0, end: _rotation).animate(
              CurvedAnimation(
                parent: ModalRoute.of(context)!.animation!,
                curve: Curves.easeInOut,
              ),
            ),
            builder: (context, child) {
              return Transform.rotate(
                angle: _rotation * 3.1416 / 180,
                child: child,
              );
            },
            child: Container(
              width: 100,
              height: 100,
              color: Colors.blue,
              child: Icon(
                Icons.star,
                color: Colors.white,
              ),
            ),
          ),
        ),
        Text('Tap to rotate'),
      ],
    );
  }
}

class CustomPaintExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: CirclePainter(),
      child: Container(
        width: 200,
        height: 200,
        alignment: Alignment.center,
        child: Text(
          'Custom Paint',
          style: TextStyle(color: Colors.white, fontSize: 18),
        ),
      ),
    );
  }
}

class CirclePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final center = Offset(size.width / 2, size.height / 2);
    final radius = size.width / 2;
    final paint = Paint()
      ..color = Colors.orange
      ..style = PaintingStyle.fill;

    canvas.drawCircle(center, radius, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

class PlatformWidgetsExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Material(
          elevation: 4,
          child: ListTile(
            leading: Icon(Icons.account_circle),
            title: Text('John Doe'),
            subtitle: Text('Software Engineer'),
            trailing: Icon(Icons.more_vert),
          ),
        ),
        SizedBox(height: 20),
        CupertinoButton.filled(
          child: Text('Explore'),
          onPressed: () {},
        ),
      ],
    );
  }
}

這個示例演示了一個綜合性的界面，包括點擊旋轉動畫、自定義繪圖和 Material/Cupertino 組件。你可以在此基礎上進一步擴展和修改，以滿足更複雜的 UI 設計需求。

總結

在本篇文章中，我們深入學習了 Flutter UI 的進階技巧。我們瞭解了佈局原理、動畫實現、自定義繪圖和效果，以及 Material 和 Cupertino 組件庫的使用。通過實例演示，你將能夠更加自信地構建複雜、令人印象深刻的用戶界面。

希望這篇文章能夠幫助你在 Flutter UI 進階方面取得更大的進展。如果你有任何問題或需要進一步的指導，請隨時向我詢問。祝你在 Flutter 開發的道路上取得成功！