Button_Alignment和位置

Question

大家好，请帮帮我。我想做一个颤动注册页面(设计图片如下所示)。我编写的代码和我做的know.if一样多，否则就会出错(我的代码和应用程序的结果截图也在下面)。那么告诉我如何在代码中实现按钮的对齐。只需告诉如何对齐/放置即可

​

​

​

​

​

​

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: () {},
              ),
            ],
          ),
        ),
      )
    );
  }
}

Answer 1

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

使用堆栈的：脚手架->堆栈-> [Positioned(top:8，right: 8)，Column->Raisedbutton1，RaisedButton2]

Using Column Scaffold -> Column-> Align(Aligment:Alignment.centerRight)、Spacer()、RaisedButton1、RaisedButton2

如果你不理解第一个选项，请阅读Stack and Positioned。希望它能有所帮助:)

Answer 2

正如@saiful-伊斯拉姆-阿达尔提到的那样，有多种方法可以实现这一点，我使用了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: () {}),
                ],
              ),
            ],
          ),
        ));
  }
}