Lặn sâu vào Widgets Hero trong Flutter

Hướng dẫn về sức mạnh của các vật dụng anh hùng trong Flutter

Bài viết này là bài viết thứ tư trong một loạt các bài viết dành cho một nghiên cứu chi tiết về các vật dụng Flutter. Sau khi trình bày các ListView, TextFields và FloatingActionButtons theo chiều sâu, bây giờ chúng ta sẽ đi vào tiện ích Hero trong Flutter.

Giới thiệu về hoạt hình anh hùng

Một hoạt hình anh hùng trong một câu chỉ đơn giản là một yếu tố của một màn hình bay bay tới trang tiếp theo khi ứng dụng chuyển sang trang tiếp theo.

Hero Animations lấy một yếu tố giống như một biểu tượng mà bây giờ được gọi là Hero Hero và một khi quá trình chuyển đổi trang được kích hoạt, thông thường bằng cách nhấp vào biểu tượng, anh hùng xuất hiện bay đến trang tiếp theo. Khi người dùng điều hướng quay lại trang trước đó, hình động sẽ đi theo hướng khác và biểu tượng quay trở lại vị trí của nó.

Chúng tôi sẽ thảo luận không chỉ về hoạt hình anh hùng cơ bản mà cả những thứ chúng ta có thể tùy chỉnh về nó. Hãy để những người nhìn thấy những điều cơ bản đầu tiên.

Tạo hoạt hình anh hùng cơ bản

Hoạt hình anh hùng có lẽ là một trong những hoạt hình dễ làm nhất trong Flutter và don lồng đòi hỏi nhiều thiết lập. Nhìn vào ví dụ trên, chúng ta có thể thấy rằng cùng một tiện ích biểu tượng ứng dụng tồn tại trên cả hai trang. Tất cả những gì chúng ta cần là một cách để nói với Flutter rằng cả hai đều được liên kết.

Chúng tôi thực hiện điều này bằng cách gói một phần tử như biểu tượng trong tiện ích Hero.

Anh hùng(
  thẻ: "DemoTag",
  con: Biểu tượng (
    Các biểu tượng.add,
    kích thước: 70,0,
  ),
),

Chúng tôi cung cấp cho nó một thẻ để đặt tên cho anh hùng cụ thể này. Điều này là cần thiết bởi vì nếu chúng ta có nhiều anh hùng trên cùng một trang, mỗi anh hùng sẽ biết nơi để bay đến.

Bây giờ ứng dụng biết rằng có một tiện ích anh hùng muốn bay đến trang tiếp theo. Bây giờ tất cả những gì chúng ta cần là một nơi để bay đến.

Tất cả những gì chúng ta cần là một tiện ích Hero trên trang thứ hai có cùng thẻ.

Anh hùng(
  thẻ: "DemoTag",
  con: Biểu tượng (
    Các biểu tượng.add,
    kích thước: 150,0,
  ),
),

Và điều này dẫn đến:

Hoạt hình anh hùng được tạo với mã ở trên

Tùy chỉnh Ảnh động Anh hùng

Tiện ích Hero cho phép chúng ta tùy chỉnh các khía cạnh của hình ảnh động. Hãy cùng khám phá một vài khả năng.

Thêm giữ chỗ

Sau khi tiện ích bay ra khỏi vị trí mà nó đã từng ở và trước khi tiện ích đến đích, sẽ có không gian trống ở điểm đến. Chúng tôi có thể thêm một giữ chỗ cho vị trí này.

Cho đến bây giờ, hãy sử dụng một Trình quản lý thông tin như một trình giữ chỗ.

Anh hùng(
    thẻ: "DemoTag",
    con: Biểu tượng (
      Các biểu tượng.add,
      kích thước: 150,0,
    ),
    placeholderBuilder: (bối cảnh, widget) {
      trả lại container (
        chiều cao: 150,0
        chiều rộng: 150,0,
        con: Thông tin hướng dẫn (),
      );
    },
  ),

Chúng tôi sử dụng trình giữ chỗ để xây dựng trình giữ chỗ và trả lại tiện ích mà chúng tôi muốn có với tư cách là người giữ chỗ.

Sử dụng trình giữ chỗ:

Công cụ Thông tư thay thế vị trí của anh hùng cho đến khi nó đến.

Thay đổi tiện ích Hero

Flutter cho phép chúng ta thay đổi widget thực sự bay từ trang này sang trang khác mà không thay đổi các widget trên hai trang.

Hãy để sử dụng biểu tượng tên lửa thay vì biểu tượng tên lửa + là người anh hùng mà không thay đổi con của các vật dụng anh hùng.

Biểu tượng anh hùng thay đổi nhưng biểu tượng cuối cùng vẫn giữ nguyên.

Chúng tôi thực hiện điều này bằng cách sử dụng tham số chuyến baySh InkBuilder (Do đó, ví dụ tên lửa).

Anh hùng(
  thẻ: "DemoTag",
  con: Biểu tượng (
    Các biểu tượng.add,
    kích thước: 150,0,
  ),
  chuyến bayShriptBuilder: (chuyến bayContext, hoạt hình, hướng,
      fromContext, toContext) {
    Biểu tượng trả về (FontAw đũaIcons.rocket, kích thước: 150.0,);
  },
),

Phương thức FlightSh mựcBuilder có 5 tham số và cung cấp cho chúng ta hình ảnh động cũng như hướng của hình ảnh động.

Hiện tại, kích thước biểu tượng tên lửa vẫn ở mức 150.0 cho cả hai hướng. Chúng ta có thể có các cấu hình khác nhau cho mỗi hướng bằng cách sử dụng tham số hướng của phương thức.

if (direction == HeroFlightDirection.push) {
  Biểu tượng trở lại (
    FontAwgieIcons.rocket,
    kích thước: 150,0,
  );
} if if (direction == HeroFlightDirection.pop) {
  Biểu tượng trở lại (
    FontAwgieIcons.rocket,
    kích thước: 70,0,
  );
}
Kích thước bây giờ khác nhau trên các hướng khác nhau.

Làm cho hoạt hình Hero hoạt động với cử chỉ vuốt ngược của iOS

Theo mặc định, hoạt hình anh hùng hoạt động khi nhấn nút quay lại trên iOS nhưng chúng không hoạt động khi vuốt ngược lại.

Sử dụng nút quay lại:

Nút quay lại kích hoạt hoạt hình anh hùng.

Sử dụng vuốt ngược:

Vuốt ngược không kích hoạt hoạt hình anh hùng.

Để giải quyết vấn đề này, chỉ cần đặt quá trình chuyển đổiOnUserGestures thành đúng trên cả hai tiện ích Hero. Điều này là sai theo mặc định.

Anh hùng(
  thẻ: "DemoTag",
  con: Biểu tượng (
    Các biểu tượng.add,
  ),
  transOnUserGestures: đúng,
),

Và điều này cũng sẽ kích hoạt hình ảnh động anh hùng trên vuốt ngược lại.

Điều đó cho nó bài viết này! Tôi hy vọng bạn thích nó, và để lại một vài tiếng vỗ tay nếu bạn đã làm. Theo dõi tôi để biết thêm các bài viết Flutter và bình luận cho bất kỳ phản hồi nào bạn có thể có về bài viết này.

Vui lòng kiểm tra các hồ sơ và bài viết khác của tôi là tốt:

Twitter

GitHub

Một số bài viết khác của tôi