android-layout - 如何在 Flutter 中添加 XML Google Pay 按钮

Question

我的 Flutter 应用使用 Google Pay 作为付款方式。正在关注these guidelines ，它们提供了 XML 按钮(我从未处理过)。

如何使用 dart 将这些按钮之一添加到 flutter 小部件？

Answer 1

laying out content for Android versus Flutter 有不同的实现.

layout/googlepay_button.xml 布局有效地描述了按钮的显示方式，drawable/googlepay_button_content.xml 包含 VectorDrawable Google Pay 按钮的文件。 flutter_svg应该可以帮助您渲染图像的内容。

要使其与 Flutter 配合使用，您需要将 xml 布局重新生成为 Flutter 小部件树。

示例布局black/res/layout/googlepay_button.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:clickable="true"
    android:focusable="true"
    android:layout_width="match_parent"
    android:layout_height="48sp"
    android:background="@drawable/googlepay_button_no_shadow_background"
    android:paddingTop="2sp"
    android:contentDescription="@string/googlepay_button_content_description">
    <LinearLayout
        android:duplicateParentState="true"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:weightSum="2"
        android:gravity="center_vertical"
        android:orientation="vertical">
        <ImageView
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:scaleType="fitCenter"
            android:duplicateParentState="true"
            android:src="@drawable/googlepay_button_content"/>
    </LinearLayout>
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:duplicateParentState="true"
        android:src="@drawable/googlepay_button_overlay"/>
</RelativeLayout>