Flutter 如何將行小部件子元素左對齊和居中

Question

我正在嘗試創建如下圖所示的社交登錄按鈕。 我想將文本按鈕圖標和名稱左對齊。 還將它們所在的行居中，以便在使用多個文本按鈕時圖標和文本垂直對齊。

預期結果：

我的結果：

我的按鈕代碼：

TextButton(
        onPressed: onTap,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Align(
              alignment: Alignment.centerLeft,
              child: Container(
                margin: const EdgeInsets.symmetric(horizontal: 20),
                width: 30,
                child: Image.asset(
                  icon,
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Text(
                buttonName,
                style: kBodyText2,
                textAlign: TextAlign.left,
              ),
            ),
          ],
        ),
        style: TextButton.styleFrom(
          backgroundColor: Colors.white,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(SizeConfig.blockSizeH! * 3),
          ),
        ),
      ),

Answer 1

您應該改用ListTile() 。 設置標題：“繼續使用 Google”。 和領先：可以設置標志。 無論您的標題有多長，位置都將始終保持不變，您還有額外的選項，如字幕和尾隨動作。 要使其像按鈕一樣使用 onTap: (){}

Answer 2

您可以通過使用Expanded小部件來實現：像這樣：

Padding(
        padding: const EdgeInsets.all(8.0),
        child: TextButton(
    onPressed: (){},
    child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Expanded(
          flex: 1,
          child: Container(),),
          Expanded(
            flex: 2,
            child: Align(
              alignment: Alignment.centerLeft,
              child: Container(
                margin: const EdgeInsets.symmetric(horizontal: 20),
                width: 30,
                child: Icon(Icons.access_alarm),
              ),
            ),
          ),
          Expanded(
            flex: 5,
            child: Align(
              alignment: Alignment.centerLeft,
              child: Text(
                'test text test',
                textAlign: TextAlign.left,
              ),
            ),
          ),
        ],
    ),
    style: TextButton.styleFrom(
        backgroundColor: Colors.grey,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10),
        ),
    ),
  ),
      ),
      const SizedBox(height: 30),
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: TextButton(
    onPressed: (){},
    child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Expanded(flex: 1, child: Container(),),
          Expanded(
            flex: 2,
            child: Align(
              alignment: Alignment.centerLeft,
              child: Container(
                margin: const EdgeInsets.symmetric(horizontal: 20),
                width: 30,
                child: Icon(Icons.access_alarm),
              ),
            ),
          ),
          Expanded(
            flex: 5,
            child: Align(
              alignment: Alignment.centerLeft,
              child: Text(
                'test text test test',
                textAlign: TextAlign.left,
              ),
            ),
          ),
        ],
    ),
    style: TextButton.styleFrom(
        backgroundColor: Colors.grey,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10),
        ),
    ),
  ),
      ),

Answer 3

您可以利用這些圖標大小相同的事實來輕松對齊它們。 您的每個TextButton已經包含一個Row ，但是您可以通過使用SizedBox添加空格來向Icon插入填充，而不是花哨的布局內容，如下所示：

TextButton(
  child: Row(
    children: [
      const SizedBox(width: 16), // padding in the beginning
      Icon(Icons.download), // the icon, or image, or whatever
      const SizedBox(width: 16), // padding in-between
      Text('Button ' * i), // the text
    ],
  ),
  onPressed: () {},
)

結果：

用於生成上述演示的代碼：

Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    for (int i = 1; i < 6; i++)
      TextButton(
        child: Row(
          children: [
            const SizedBox(width: 16),
            Icon(Icons.download),
            const SizedBox(width: 16),
            Text('Button ' * i),
          ],
        ),
        onPressed: () {},
        style: TextButton.styleFrom(
          backgroundColor: Colors.white,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(16),
          ),
        ),
      ),
  ],
)