Flutter如何将行小部件子级对齐到左侧和中心答案

【问题标题】：Flutter How to align row widget children to left and centerFlutter如何将行小部件子级对齐到左侧和中心
【发布时间】：2021-11-28 08:55:34
【问题描述】：

我正在尝试创建如下图所示的社交登录按钮。我想将 textbutton 图标和名称左对齐。还将它们所在的行居中，以便在使用多个文本按钮时图标和文本垂直对齐。

预期结果：

我的结果：

我的按钮代码：

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),
          ),
        ),
      ),

【问题讨论】：

试试我的回答here希望对你有帮助

标签： flutter dart flutter-layout

【解决方案1】：

你应该使用ListTile() 反而。设置标题：“继续使用 Google”。并领先：您可以设置标志。无论您的标题有多长，位置都将始终保持不变，您还有额外的选项，如字幕和尾随操作。为了使它像一个按钮使用点按：(){}

【讨论】：

【解决方案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),
        ),
    ),
  ),
      ),

【讨论】：

你误解了我的问题，我想将文本和图标向左对齐并居中，以便在我使用多个按钮时它们垂直对齐。
啊，我明白了。更新了我的答案

【解决方案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),
          ),
        ),
      ),
  ],
)

【讨论】：