如何在 Flutter 中將 TextButton 的圖標右對齊？

Question

使用此示例代碼，TextButton 小部件可以在左側呈現為帶有圖標。

TextButton.icon(
  onPressed: onPressed,
  icon: Icon(
    Icons.arrowOpen,
    color: companySelectionColor,
  ),
  label: text,
),

但是我想使用完全相同的小部件，但在右側呈現圖標。 有沒有辦法在右側呈現這個圖標？

以下是所需 output 的示例：

Answer 1

我認為根據此處<\/a>的文檔和我的知識，圖標不是右側位置，但您使用Directionality()<\/strong>小部件已解決只需您使用ElevetedBtton.icon<\/strong>而不是TextButton.icon<\/strong>並且它工作正常並且您使用Directionality()<\/strong>小部件參考下面的代碼希望對您有所幫助。

通過Directionality()<\/strong>小部件使用 ElevetedBtton.icon

 
    

     使用 TextButton.icon
<\/blockquote>
     

     

       

        通過Directionality()<\/strong>小部件使用 TextButton.icon
<\/blockquote>
 
您的屏幕使用 ElevetedBtton.icon 小部件，例如 -> <\/a>
您的屏幕使用 TextButton.icon 小部件，例如 -> 
您的屏幕使用 TextButton.icon 使用 Directionality() 的小部件，例如 -> 
 
       
 
    

Answer 2

TextButton.icon(
      onPressed:null,
      icon: Text('2022-01-27'),
      label: Icon(Icons.arrow_drop_down_sharp),
    )

Answer 3

Directionality(
                        textDirection: TextDirection.rtl,
                        child: TextButton.icon(
                          onPressed: () {
                            Navigator.pushNamed(context, Routes.checkout);
                          },
                          icon: const Icon(IcoFontIcons.arrowRight),
                          label: const Text(
                            "Chekout",
                            style: TextStyle(color: Colors.blue),
                          ),
                        ),
                      )

Answer 4

您可以使用Directionality<\/code>小部件包裝小部件。 此小部件可以將給定的文本方向應用於子小部件。 使用文本按鈕可以執行以下操作：

Directionality(
  textDirection: TextDirection.rtl,
  child: TextButton.icon(
    onPressed: onPressed,
    icon: Icon(
      Icons.arrowOpen,
       color: companySelectionColor,
    ),
    label: text,
  ),
);

Answer 5

您可以嘗試使用IconButton<\/code>並將 Text 小部件添加為子小部件。

IconButton(
   icon: Icon(Icons.arrowOpen),
   iconSize: 12,
   onPressed: () {},
),