Flutter TextButton 占据整个宽度

Posted 2023-02-23

【中文标题】Flutter TextButton 占据整个宽度

【英文标题】：Flutter TextButton take up the whole width

【发布时间】：2021-01-30 10:57:19

【问题描述】：

我正在做一个需要位于页面右侧的 TextButton。

按钮内容在右侧，但按钮本身占据了页面的整个宽度。我怎么能不呢？

这是我的代码：

Padding(
  padding: const EdgeInsets.only(bottom: 14.0, right: 7.0),
  child: TextButton(
    onPressed: onPressed,
    style: ButtonStyle(
      backgroundColor: MaterialStateProperty.resolveWith<Color>(
            (Set<MaterialState> states) 
          if (states.contains(MaterialState.pressed))
            return Theme.of(context).colorScheme.primary.withOpacity(0.5);
          return Colors.red;
        ,
      ),
    ),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.end,
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.only(right: 9.5, top: 1.6),
          child: Icon(Icons.back_arrow, color: Colors.blue),
        ),
        Text( "Home",
          style: Theme.of(context)
              .textTheme
              .bodyText2
              .merge(TextStyle(color: Colors.blue)
          )
        ),
      ]),
  ),
);

我尝试将按钮包装在 Align 中，但没有成功

【参考方案1】：

不确定您想要实现什么，但是您可以将所有内容包装到 Row 和 Container 中...

Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Container(
            width: 150,
            alignment: Alignment.centerRight,
            child: TextButton(
              onPressed: () ,
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.resolveWith<Color>(
                  (Set<MaterialState> states) 
                    if (states.contains(MaterialState.pressed)) return Theme.of(context).colorScheme.primary.withOpacity(0.5);
                    return Colors.red; // Use the component's default.
                  ,
                ),
              ),
              child: Row(mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[
                Padding(
                  padding: const EdgeInsets.only(right: 9.5, top: 1.6),
                  child: Icon(Icons.arrow_back, color: Colors.blue),
                ),
                Text("Home", style: Theme.of(context).textTheme.bodyText2.merge(TextStyle(color: Colors.blue))),
              ]),
            ),
          )
        ],
      ),

按钮的新对齐方式：

Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Container(
            height: 50,
            width: 150,
            alignment: Alignment.centerRight,
            child: TextButton(
              onPressed: () ,
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.resolveWith<Color>(
                  (Set<MaterialState> states) 
                    if (states.contains(MaterialState.pressed)) return Theme.of(context).colorScheme.primary.withOpacity(0.5);
                    return Colors.red; // Use the component's default.
                  ,
                ),
              ),
              child: Row(children: <Widget>[
                Padding(
                  padding: const EdgeInsets.only(right: 9.5, top: 1.6),
                  child: Icon(Icons.arrow_back, color: Colors.blue),
                ),
                Text("Home", style: Theme.of(context).textTheme.bodyText2.merge(TextStyle(color: Colors.blue))),
              ]),
            ),
          )
        ],
      ),

【讨论】：

几乎是对的，只是按钮占用了容器的宽度。我正在尝试让按钮具有水平的图标和文本，彼此相邻，并且位于右侧。它应该很简单，但我无法让它工作

好的检查新的编辑...这是你的想法吗？右边的按钮，左边的按钮内容..图标+空格+标签？

@dGoram，从您的代码（第一个版本）中删除 Container 的固定宽度就可以了，谢谢，会接受。