Flutter文本按钮占据整个宽度

Question

我正在制作一个文本按钮，需要将其放置在页面的右侧。

按钮内容位于右侧，但按钮本身占据了整个页面的宽度。如何使其不占据整个宽度？

这是我的代码：

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包装按钮，但没有起作用

- user3808307

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

- dGoran

---

它几乎正确，只是按钮占据了容器的宽度。我试图让按钮水平地显示一个带有图标和文本的按钮，并将其放置在右侧。这应该非常简单，但我无法让它正常工作。 - user3808307

确定检查新编辑...这是你想要的吗？ 右侧按钮，左侧按钮内容...图标+空格+标签？ - dGoran

@dGoram，从您的代码中删除容器的固定宽度（第一个版本）解决了问题，谢谢，我会接受。 - user3808307

Answer 2

使用Expanded进行包裹，并确保父级占据整个宽度：

         Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
          Expanded(
                     child: TextButton(
                     child: Text('Click'),
                     onPressed: () {},
                     ),
                   ), 
          ]
          ),

- TiyebM