Flutter TextButton 占据整个宽度

Question

我正在做一个 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)
          )
        ),
      ]),
  ),
);

我尝试将按钮包裹在“对齐”中，但没有用

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

Answer 2

用 包裹起来Expanded，并确保父级占据整个宽度：

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