How to change the location of ElevateButton to the right side, which properties or widgets help me to do that?

huangapple go评论63阅读模式
英文:

How to change the location of ElevateButton to the right side, which properties or widgets help me to do that?

问题

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),
            alignment: Alignment.centerRight,  // 将按钮位置调整到右侧
          ),
          onPressed: (() {}),
          child: Text(
            'Projects',
            style: TextStyle(
              fontSize: 20.0,
            ),
          ),
        ),
        SizedBox(
          height: 50.0,
        ),
      ],
    ),
  ),
),
英文:

I don't want the button to be in the centre instead of that I want to change the location of the button to the right and I don't know how to do that. I need some help

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

How to change the location of ElevateButton to the right side, which properties or widgets help me to do that?

I tried to use Padding, but I'm new to Flutter

答案1

得分: 0

尝试使用 Align 小部件,例如

Align(
  alignment: Alignment.centerRight,
  child: ElevatedButton(
英文:

Try using Align widget like

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

答案2

得分: 0

将ElevatedButton包裹在Row中,并将Expanded(child: SizedBox.expand())添加为此行的第一个子元素,ElevatedButton作为第二个子元素。

英文:

Wrap the ElevatedButton in Row and add Expanded(child: SizedBox.expand()) as first child to this row and ElevatedButton as 2nd child.

答案3

得分: 0

你可以给你的列使用 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,
    ),
  ],
)
英文:

You can give crossAxisAlignment to your column:

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

If this doesn't work, you can also do this:

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

答案4

得分: 0

这取决于小部件树以及其对齐方式。您的Padding小部件可能被包装在某个居中对齐的小部件内。因此,假设您的Padding小部件的对齐方式不受任何父级小部件的影响。以下是解决方法:

有多种方法可以实现这一点。例如,

  1. 您可以在Column属性中添加crossAxisAlignment: CrossAxisAlignment.end,
  2. 您可以将您的ElevatedButton包装在Row内,并添加mainAxisAlignment: MainAxisAlignment.end,属性。
  3. 您可以使用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,
        ),
          ],
        ),
      ],
    ),
  ),
)
英文:

It depends on the widget tree, how its aligned. Your Padding widget may be wrapped inside some widget which is center aligned. So assuming that your Padding widget alignment is not affected by any parent widget. Here is solution to this.

There are multiple approaches for that. For example,

  1. You can add crossAxisAlignment: CrossAxisAlignment.end, in Column attributes.
  2. You can wrap your ElevatedButton inside a Row and add the mainAxisAlignment: MainAxisAlignment.end, attributes.
  3. You can use Align class to make it work.

Just like this, here i have used both Column and Row alignments for the sake of demonstration. But you can use whatever suits best to your situation.

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

huangapple
  • 本文由 发表于 2023年2月16日 02:23:45
  • 转载请务必保留本文链接:https://go.coder-hub.com/75463987.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定