dart 如何将ElevateButton的位置更改到右侧,哪些属性或小部件可以帮助我完成此操作?

5lhxktic  于 2023-02-17  发布在  其他
关注(0)|答案(4)|浏览(207)

我不希望按钮在中间,而不是我想改变按钮的位置到右边,我不知道该怎么做。我需要一些帮助

Padding(
  padding: const EdgeInsets.all(10.0),
  child: Container(
    child: Column(
      children: [
        ElevatedButton(
          style: ElevatedButton.styleFrom(
            primary: Colors.blue,
            padding:
                EdgeInsets.symmetric(horizontal: 30, vertical: 15),
          ),
          onPressed: (() {}),
          child: Text(
            'Projects',
            style: TextStyle(
              fontSize: 20.0,
            ),
          ),
        ),
        SizedBox(
          height: 50.0,
        ),
      ],
    ),
  ),
),

我尝试使用填充,但我是Flutter新手

waxmsbnn

waxmsbnn1#

尝试使用“对齐”微件,如

Align(
  alignment: Alignment.centerRight,
  child: ElevatedButton(
46qrfjad

46qrfjad2#

将ElevatedButton换行并添加Expanded(子级:SizedBox.expand())作为此行的第一个子级,ElevatedButton作为第二个子级。

rjzwgtxy

rjzwgtxy3#

您可以将crossAxisAlignment赋给您的列:

Column(
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        ElevatedButton(
          style: ElevatedButton.styleFrom(
            primary: Colors.blue,
            padding:
                EdgeInsets.symmetric(horizontal: 30, vertical: 15),
          ),
          onPressed: (() {}),
          child: Text(
            'Projects',
            style: TextStyle(
              fontSize: 20.0,
            ),
          ),
        ),
        SizedBox(
          height: 50.0,
        ),
      ],

如果此操作不起作用,您还可以执行以下操作:

Column(
      children: [
        Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Expanded(child: Container()),
                ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    primary: Colors.blue,
                    padding: EdgeInsets.symmetric(horizontal: 30, vertical: 15),
                  ),
                  onPressed: (() {}),
                  child: Text(
                    'Projects',
                    style: TextStyle(
                      fontSize: 20.0,
                    ),
                  ),
                ),
              ],
            ),
        SizedBox(
          height: 50.0,
        ),
      ],
kgsdhlau

kgsdhlau4#

这取决于小部件树,它是如何对齐的。你的Padding小部件可能被包裹在一些居中对齐的小部件里面。所以假设你的Padding小部件对齐不受任何父小部件的影响。这里是这个问题的解决方案。
有很多种方法。例如,
1.可以在Column属性中添加crossAxisAlignment: CrossAxisAlignment.end,
1.您可以将ElevatedButton Package 在Row中,并添加mainAxisAlignment: MainAxisAlignment.end,属性。
1.您可以使用Align类使其工作。
就像这样,这里我使用了ColumnRow两种对齐方式来进行演示,但是您可以使用最适合您的情况的对齐方式。

Padding(
  padding: const EdgeInsets.all(10.0),
  child: Container(
    child: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            ElevatedButton(
          style: ElevatedButton.styleFrom(
            primary: Colors.blue,
            padding:
                EdgeInsets.symmetric(horizontal: 30, vertical: 15),
          ),
          onPressed: (() {}),
          child: Text(
            'Projects',
            style: TextStyle(
              fontSize: 20.0,
            ),
          ),
        ),
        SizedBox(
          height: 50.0,
        ),
          ],
        ),
      ],
    ),
  ),
),

相关问题