Hạn chế và biện pháp khắc phục sự cố

Giới hạn của Figma và bản dịch

Những loại lớp Figma được hỗ trợ

Relay chỉ hỗ trợ các loại lớp sau đây:

  • Nút văn bản
  • Nút hình ảnh (PNG, JPEG, v.v.)
  • Nút khung (autolayout và non-autolayout)
  • Thành phần và biến thể, các bản sao thành phần
  • Nút vectơ

Các lớp và tính năng Figma chưa được hỗ trợ

  • Tính năng tạo mẫu
  • Nhóm mặt nạ
  • Lớp lát cắt

Thuộc tính Figma chưa được hỗ trợ

Một số thuộc tính chưa được hỗ trợ bao gồm:

  • Bóng trong, làm mờ lớp và làm mờ nền
  • Xoay lớp (hỗ trợ xoay vòng vectơ)
  • Chế độ trộn nhiều lớp hoặc nét vẽ (hỗ trợ chế độ trộn màu nền)
  • Các thuộc tính văn bản:
    • Giãn cách đoạn
    • Thụt lề đoạn
    • Định kiểu số
    • Mặt chữ
    • Nhóm kiểu chữ
    • Gạch ngang và gạch dưới
    • Chiều cao dòng (vẫn hoạt động khi áp dụng cho toàn bộ thành phần văn bản)
  • Các thuộc tính vectơ:
    • Các tính năng mà định dạng VectorDrawable của Android chưa hỗ trợ:
      • Hình ảnh bitmap được nhúng
        • Ngoại trừ hình chữ nhật được hỗ trợ dưới dạng hình ảnh thay vì vectơ
      • Nét gạch ngang
      • Làm mờ
      • Bóng
      • Mẫu
      • Mặt nạ
      • Độ mờ của nhóm
      • Tiêu điểm chuyển màu toả tròn
    • Các tính năng mà định dạng SVG không hỗ trợ:
      • Chuyển màu góc
      • Chuyển màu kim cương
    • Toán tử Boolean giữa các đối tượng vectơ (liên kết/trừ/giao nhau/loại trừ)
      • Một giải pháp để xử lý vấn đề này là kết hợp và làm phẳng thành một vectơ

Các lớp Figma và thuộc tính được hỗ trợ một phần

  • Rút ngắn văn bản (dấu ba chấm) hoạt động ổn định nhất khi mục văn bản chỉ có một dòng
  • Màu tô:
    • Hình ảnh chỉ có thể có một màu nền, nhưng cũng có thể có thêm các màu nền thuộc loại khác (ví dụ: màu chuyển tiếp)
    • Đối với màu chuyển tiếp, chỉ hỗ trợ màu chuyển tiếp tuyến tính. Các bản phát hành trong tương lai sẽ hỗ trợ thêm các loại màu chuyển tiếp còn lại (bán kính, kim cương và góc).
    • Trong trình bổ trợ Figma, không có cách để chỉ định rằng một tham số có thể chấp nhận nhiều màu nền. Nếu bạn muốn tham số hoá màu nền, thì hiện tại các tham số chỉ hỗ trợ màu đồng nhất.
  • Bóng đổ:
    • Hiệu ứng bóng đổ hiện không hoạt động trên các lớp sau:
      • Vectơ không phải hình chữ nhật
      • Vectơ hình chữ nhật xoay
    • Chưa hỗ trợ nhiều bóng đổ trên từng lớp.
    • Các chế độ trộn bóng đổ không phải "Bình thường" (Normal) chỉ có tại Android phiên bản 10 trở lên (vui lòng bỏ qua nếu bạn không dùng Android phiên bản này).
    • Hiệu ứng bóng đổ trên lớp chỉ có tại phiên bản Android 9 trở lên, tuy nhiên Hiệu ứng bóng đổ trên văn bản lại có mặt trong mọi phiên bản Android mà Compose hỗ trợ.
    • Bóng sẽ luôn hiện phía sau các lớp trong suốt trong Compose.
  • Vị trí tuyệt đối trong bố cục tự động:
    • Các đối tượng có vị trí tuyệt đối phải đứng sau hoặc trước tất cả phần tử bố cục tự động trong khung. Mọi đối tượng có vị trí tuyệt đối nằm ở lớp giữa các phần tử bố cục tự động sẽ được đẩy lên phía trước.
    • Khi lồng các khung bố cục tự động với các đối tượng có vị trí tuyệt đối bên trong các khung bố cục tự động khác, bố cục có thể không chính xác do hộp bao quanh của khung lồng nhau sẽ chịu ảnh hưởng của các mục đã định vị trong khung đó.

Nhiều kiểu chữ sẽ bị xoá bỏ nếu được truyền vào tham số văn bản chỉ có một kiểu chữ

Nếu một thành phần mẹ cố gắng truyền văn bản nhiều kiểu chữ vào tham số văn bản thành phần lồng ghép chỉ có một kiểu chữ, thì mã Compose đã tạo sẽ không thể lưu lại những kiểu này. Chỉ có kiểu chữ gốc của tham số văn bản mới được giữ lại.

Việc hạ cấp này cần được thực hiện để tránh việc các loại dữ liệu không trùng khớp ngăn cản quá trình biên dịch mã được tạo. Nếu văn bản trong một thành phần có nhiều kiểu chữ, thì thành phần kết hợp đã tạo sẽ có tham số AnnotatedText. Nếu văn bản trong thành phần chỉ có một kiểu chữ, thì thành phần kết hợp đã tạo sẽ có tham số String đơn giản. Trong trường hợp trên, chúng ta cần chuyển đổi văn bản đa dạng thức của thành phần mẹ từ AnnotatedText thành String, bỏ nhiều kiểu chữ để có thể truyền văn bản này đến thực thể thành phần lồng ghép.

Thành phần lồng ghép có cùng thuộc tính biến thể khiến thành phần mẹ không biên dịch được

Nếu hai thành phần có [biến thể thiết kế]{:.external} có cùng tên thuộc tính và thành phần này lồng vào thành phần kia, thì trong mã được tạo, các giá trị enum được tạo của hai biến thể sẽ có cùng tên và gây ra lỗi biên dịch:

Conflicting import, imported name '(variant property)' is ambiguous

Để xử lý vấn đề này, hãy đổi tên thuộc tính biến thể của một trong hai thành phần.

Hỗ trợ phông chữ

Chúng tôi hiện chỉ hỗ trợ phông chữ của Google Fonts.

Khắc phục sự cố của Android Studio

Tôi gặp lỗi khi chuyển đổi tài nguyên SVG trên Windows

FAILURE: Build failed with an exception.
*   What went wrong:
Execution failed for task ':app:generateDebugRelayCode'.
> A failure occurred while executing com.google.relay.gradle.GenerateCode$GenerateCodeWorkAction
      > Converting SVG files: Exception Converting SVG resources for my_packaged_component
        The syntax of the command is incorrect

Tên dự án Android Studio của bạn có thể quá dài. Trên Windows, đường dẫn đầy đủ của dự án Android Studio không được dài quá 70 ký tự. Chúng tôi đang nỗ lực hãy tăng thời lượng này trong bản phát hành sau này.

Bản cập nhật không được nhập vào Android Studio

Trình bổ trợ này sẽ chỉ kéo xuống phiên bản mới nhất đã đặt tên của tệp Figma. Kiểm tra kỹ để đảm bảo bạn đã tạo một phiên bản mới đã đặt tên của tệp Figma chứa các thay đổi này.

Tôi gặp lỗi về SVG và Java Runtime trong quá trình tạo bản dựng

Converting SVG Files: Exception running shell command 'cd /path-to/relay/bin; path/to/relay/bin/vd-tool -c -in path/to/hello_card -out /var/folders/...'.
The operation couldn't be completed. Unable to locate a Java Runtime.
Please visit http://www.java.com for information on installing Java.

Cài đặt Java Runtime, sau đó tạo lại bản dựng.

Tôi gặp lỗi về phông chữ trong quá trình tạo bản dựng

Bạn có thể nhìn thấy một lỗi tương tự như sau:

FAILURE: Build failed with an exception.
*   What went wrong:
Execution failed for task ':app:generateDebugRelayCode'.
> Multiple task action failures occurred:
   > A failure occurred while executing com.google.relay.gradle.GenerateCode$GenerateCodeWorkAction
      > /Users/me/AndroidStudioProjects/MyProject/app/build/generated/res/relay/debug/font/relay_inter_bold.ttf
   > A failure occurred while executing com.google.relay.gradle.GenerateCode$GenerateCodeWorkAction
      > /Users/me/AndroidStudioProjects/MyProject/app/build/generated/res/relay/debug/font/relay_inter_bold.ttf

Việc này là do một tình huống tương tranh gây ra: nhiều thành phần cố sao chép một phông chữ vào trong cùng thư mục. Chúng tôi đang nỗ lực để khắc phục sự cố này. Trong khi chờ đợi, hãy thử tạo lại bản dựng.

Trong Android Studio, việc huỷ thao tác xoá thư mục Gói giao diện người dùng có thể không thành công

Nếu bạn xoá một thư mục Gói giao diện người dùng trong thư mục ui-packages trong Android Studio, sau đó huỷ thao tác xoá, thì mọi tệp trong thư mục đó chưa được mở trước khi xoá sẽ không được khôi phục đúng cách.

Giải pháp: Nhập lại phiên bản tệp Figma mà bạn cần sử dụng bằng cách nhấn vào File > New > Import UI Packages… (Tệp > Mới > Nhập gói giao diện người dùng...). Bạn cũng có thể nhấp vào mọi tệp trong thư mục Gói giao diện người dùng khi nhập để đảm bảo những tệp này sẽ được khôi phục đúng cách.

Cập nhật tài nguyên nằm ngoài ui-packages không buộc phải tạo bản dựng mới

Việc cập nhật phần phụ thuộc ở bên ngoài thư mục ui-packages (chẳng hạn như tệp ánh xạ giao diện hoặc tệp thành phần tham chiếu) không buộc phải tạo lại mã khi bạn tạo dự án

Giải pháp: Để buộc cập nhật mã đã tạo, hãy xoá dự án (chuyển đến Build > Clean Project (Bản dựng > Dọn sạch dự án)) hoặc xoá thư mục mã đã tạo được liên kết với Gói giao diện người dùng cần cập nhật. Sau đó, hãy tạo lại dự án.

Thiếu mã đã tạo hoặc ui-packages thư mục trong trình duyệt dự án Android

Trong một số trường hợp, các thư mục do trình bổ trợ Chuyển tiếp cho Android Studio tạo ra sẽ không sẽ xuất hiện trong trình duyệt dự án Android.

Giải pháp: Để tải lại thư mục dự án, hãy nhấp chuột phải vào một thư mục cấp cao nhất rồi chọn "Tải lại từ ổ đĩa".

Chưa cập nhật giao diện ứng dụng của thành phần con

Khi một thành phần mẹ được nhập lại với giao diện ứng dụng mới, các thành phần con (liệt kê trong DEPS.txt) sẽ không chọn giao diện mới này.

Giải pháp: Sao chép giao diện xem trước từ thành phần mẹ config.json rồi thay thế các thành phần con xem trước chủ đề cùng với giao diện này config.json tương ứng. Sau khi bạn đã tạo lại, giao diện trong thành phần con mã tạo ra sẽ được khắc phục.

Tên Gói giao diện người dùng phải bắt đầu bằng chữ cái

Nếu tên Gói giao diện người dùng không bắt đầu bằng chữ cái, thì Relay sẽ tạo mã Compose không biên dịch kèm thông báo lỗi cho biết The resource name must start with a letter.

Giải pháp: Trong Figma, hãy đổi tên Gói giao diện người dùng thành tên bắt đầu bằng chữ cái.

Khoảng đệm phông chữ trong Compose không khớp với Figma

Figma và Compose bố trí văn bản trong hộp giới hạn theo kiểu khác nhau. Compose sẽ thêm nhiều khoảng đệm dọc theo phía trên hộp giới hạn.

Giải pháp: Bạn sẽ phải di chuyển vị trí văn bản của Figma lên vài pixel để văn bản này được sắp xếp một cách chính xác trong Compose. Chúng tôi đang nỗ lực khắc phục sự cố này vĩnh viễn.