按钮对齐和位置答案

【问题标题】：Button_Alignment and position按钮对齐和位置
【发布时间】：2020-02-16 01:13:55
【问题描述】：

大家好，请帮帮我。我想做一个颤振的注册页面（设计图片如下）。我尽可能多地编写代码。如果我做其他任何事情都会出错（我的代码和应用程序结果屏幕截图也在下面给出）。所以告诉我我在代码中做了什么来对齐按钮。只需告诉对齐/放置的方式

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Travel Budget App",
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: FirstView(),
    );
  }
}
class FirstView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Align(
         alignment: Alignment.bottomCenter,
         child: Padding(
          padding: const EdgeInsets.only(bottom: 100),
          child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
              RaisedButton(
                color: Colors.white,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(30.0)),
                child: Padding(
                  padding: const EdgeInsets.only(
                      top: 10.0, bottom: 10.0, left: 30.0, right: 30.0),
                ),
                onPressed: () {},
              ),
              RaisedButton(
                color: Colors.white,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(30.0)),
                child: Padding(
                  padding: const EdgeInsets.only(
                      top: 10.0, bottom: 10.0, left: 30.0, right: 30.0),
                ),
                onPressed: () {},
              ),
            ],
          ),
        ),
      )
    );
  }
}

【问题讨论】：

标签： button flutter position alignment

【解决方案1】：

您可以通过多种方式实现这一目标。

使用堆栈： Scaffold -> Stack -> [Positioned(top:8, right: 8), Column->[Raisedbutton1, RaisedButton2]]

使用列 Scaffold -> Column-> [Align(Aligment:Alignment.centerRight), Spacer(), RaisedButton1, RaisedButton2]

如果您不了解第一个选项，请阅读 Stack 和 Positioned 小部件。希望对你有帮助:)

【讨论】：

【解决方案2】：

正如@saiful-islam-adar 提到的，有多种方法可以实现这一目标我用spacer

class FirstView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        body: Padding(
          padding: const EdgeInsets.symmetric(vertical: 100, horizontal: 10.0),
          child: Column(
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  RoundedButton(
                      color: Colors.white, text: 'Login', onPressed: () {}),
                ],
              ),
              Spacer(),
              Column(
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  RoundedButton(
                      color: Colors.white, text: 'E-mail', onPressed: () {}),
                  SizedBox(
                    height: 10,
                  ),
                  RoundedButton(
                      color: Colors.white, text: 'Facebook', onPressed: () {}),
                ],
              ),
            ],
          ),
        ));
  }
}

【讨论】：