如何在中心小部件内的按钮内左对齐文本扑？答案

【问题标题】：How to align text left inside a button, which is inside a centre widget | Flutter?如何在中心小部件内的按钮内左对齐文本扑？
【发布时间】：2021-01-03 20:37:15
【问题描述】：

我的按钮必须在中心，但必须在同一行对齐，侧面按钮中的文本也应该左对齐。为此我使用 textalign left 但在我的代码中不起作用，我不知道为什么。This is my layout screenshot.

所以任何人都可以修改我的代码，使按钮内的文本左对齐，而不影响我的按钮位置。

谢谢

class Something extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Solve Before Downvote !'),
      ),
      body: Container(
        color: Color(0xff263238),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SingleChildScrollView(
              child: Center(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    MaterialButton(
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10.0)),
                      padding: EdgeInsets.only(left: 5),
                      color: Colors.green,
                      onPressed: () {},
                      child: Text('SomeThing', textAlign: TextAlign.left),
                    ),
                    MaterialButton(
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10.0)),
                      color: Colors.green,
                      onPressed: () { },
                      child: Text('Nothing', textAlign: TextAlign.left),
                    ),
                    MaterialButton(
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10.0)),
                      color: Colors.green,
                      onPressed: () {},
                      child: Text('Can You do something ?',
                          textAlign: TextAlign.left),
                    ),
                    MaterialButton(
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10.0)),
                      color: Colors.green,
                      onPressed: () {},
                      child: Text('Nothing to do !', textAlign: TextAlign.left),
                    ),
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

what i made

【问题讨论】：

不确定您要的是什么，但MaterialButton 有一个默认的padding，可以通过在MaterialButton 中使用padding: EdgeInsets.zero 来删除它。
我询问了 Material 按钮里面的文字，应该是左对齐。为此我使用 textAlign: TextAlign.left 但不起作用，您可以在屏幕截图中看到。
那是因为MaterialButton有默认的padding，你可以通过将padding设置为EdgeInsets.zero来移除EdgeInsets.zero。
你需要所有按钮在中心垂直和水平对齐吗？
i.ibb.co/W2pF5nP/image.png ->image 1 或 i.ibb.co/hZ60zYt/image.png =>image 2 你指的是哪个

标签： android flutter dart flutter-layout

【解决方案1】：

请检查以下代码。我已经在代码中注释掉了解决方案。

class Something extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
   return Scaffold(
  appBar: AppBar(
    title: const Text('Solve Before Downvote !'),
  ),
  body: Container(
    width: MediaQuery.of(context).size.width,
    color: Color(0xff263238),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        SingleChildScrollView(
          child: Center(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                  padding: const EdgeInsets.all(2.0),
                  child: Material(
                    color: Colors.green,
                    borderRadius: BorderRadius.circular(10.0),
                    child: InkWell(
                      onTap: () {
                        setState(() {
                          abc = true;
                        });
                      },
                      child: Padding(
                        padding: const EdgeInsets.fromLTRB(0, 12, 15, 12),
                        child: Text('SomeThing', textAlign: TextAlign.left),
                      ),
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(2.0),
                  child: Material(
                    color: Colors.green,
                    borderRadius: BorderRadius.circular(10.0),
                    child: InkWell(
                      onTap: () {
                        setState(() {
                          abc = true;
                        });
                      },
                      child: Padding(
                        padding: const EdgeInsets.fromLTRB(0, 12, 15, 12),
                        child: Text('Nothing', textAlign: TextAlign.left),
                      ),
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(2.0),
                  child: Material(
                    color: Colors.green,
                    borderRadius: BorderRadius.circular(10.0),
                    child: InkWell(
                      onTap: () {
                        setState(() {
                          abc = true;
                        });
                      },
                      child: Padding(
                        padding: const EdgeInsets.fromLTRB(0, 12, 15, 12),
                        child: Text('Can You do something ?',
                            textAlign: TextAlign.left),
                      ),
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(2.0),
                  child: Material(
                    color: Colors.green,
                    borderRadius: BorderRadius.circular(10.0),
                    child: InkWell(
                      onTap: () {
                        setState(() {
                          abc = true;
                        });
                      },
                      child: Padding(
                        padding: const EdgeInsets.fromLTRB(0, 12, 15, 12),
                        child: Text('Nothing to do !',
                            textAlign: TextAlign.left),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        )
      ],
    ),
  ),
);
  }
}

【讨论】：

，感谢您的努力。这是我真正需要的，但需要另一个帮助，如何让手势检测器在点击时显示涟漪
@PMahto ，对不起，伙计，您需要使用 InkWell。它会工作，经过测试。我刚刚更新了代码，请检查一次。如果它有效，请给我投票。
它有效，再次感谢，但对不起，没有足够的声誉投票
我认为它是一个无状态小部件，所以 setState 显示错误？
让它有状态，你在无状态下工作，我做了有状态

【解决方案2】：

你可以在小部件子文本之前添加Align()并设置alignment : Alignment.centerLeft

【讨论】：

它会增加按钮大小
@DanarPutra ，甚至是对的，它增加了我的按钮大小，比如（宽度匹配父级哈哈）