crossAxisAlignment：CrossAxisAlignment.end 不起作用

Question

我对编程和 Flutter 都很陌生，所以如果我的问题很愚蠢，请原谅。我正在尝试将“跳过”按钮推到屏幕的左下角。但是 crossAxisAlignment: CrossAxisAlignment.end 代码不起作用。我怎样才能以正确的方式做到这一点，以便它可以正确适应所有屏幕格式？有问题的部分在整个代码的底部。提前致谢！

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MainPage(),
    );
  }
}

class MainPage extends StatefulWidget {
  const MainPage({Key? key}) : super(key: key);

  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            margin: EdgeInsets.only(left: 15, top: 30),
            width: 230,
            decoration: BoxDecoration(),
            child: Image.asset('images/logo1.png'),
          ),
          Container(
            margin: EdgeInsets.only(left: 15, top: 30),
            child: Text(
              'Login',
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
            ),
          ),
          Container(
            margin: EdgeInsets.only(left: 15, right: 15, top: 30),
            height: 50,
            width: double.infinity,
            child: Text(
              'E-mail',
              style: TextStyle(fontSize: 20, color: Colors.black54),
            ),
            padding: EdgeInsets.only(top: 10, left: 15, bottom: 10),
            decoration: BoxDecoration(
              border: Border.all(
                width: 1,
                color: Colors.black54,
              ),
              borderRadius: BorderRadius.all(
                Radius.circular(7),
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.only(left: 15, right: 15, top: 15),
            height: 50,
            width: double.infinity,
            child: Text(
              'Password',
              style: TextStyle(fontSize: 20, color: Colors.black54),
            ),
            padding: EdgeInsets.only(top: 10, left: 15, bottom: 10),
            decoration: BoxDecoration(
              border: Border.all(
                width: 1,
                color: Colors.black54,
              ),
              borderRadius: BorderRadius.all(
                Radius.circular(7),
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.only(left: 15, right: 15, top: 15),
            child: MaterialButton(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(7),
              ),
              height: 50.0,
              minWidth: double.infinity,
              color: Colors.orangeAccent,
              child: Text(
                "Login",
                style: TextStyle(
                  fontSize: 20.0,
                  color: Colors.white,
                ),
              ),
              onPressed: () => {},
              splashColor: Colors.redAccent,
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 5),
            child: Center(
              child: TextButton(
                style: TextButton.styleFrom(
                  textStyle: TextStyle(fontSize: 17),
                ),
                onPressed: () {},
                child: Text(
                  'Forgot your password?',
                  style: TextStyle(color: Colors.black54),
                ),
              ),
            ),
          ),
          Row(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Container(
                margin: EdgeInsets.only(top: 5),
                child: TextButton(
                  style: TextButton.styleFrom(
                    textStyle: TextStyle(fontSize: 17),
                  ),
                  onPressed: () {},
                  child: Text(
                    'Skip',
                    style: TextStyle(color: Colors.black54),
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

移动显示

Answer 1

删除Row()。将 alignment: Alignment.centerRight, 添加到您的 Container.

Container(
            margin: EdgeInsets.only(top: 5),
            alignment: Alignment.centerRight,
            child: TextButton(
              style: TextButton.styleFrom(
                textStyle: TextStyle(fontSize: 17),
              ),
              onPressed: () {},
              child: Text(
                'Skip',
                style: TextStyle(color: Colors.black54),
              ),
            ),
          ),

Answer 2

您可以在 Row 之前使用 Spacer 小部件。默认情况下，行子项将从左侧开始。

 ///others widgets 
 const Spacer(), /// just add this
 Row(....

更多关于 Spacer widget。

Answer 3

水平更改行子项的位置你需要使用 mainAxisAlignment 属性

mainAxisAlignment 属性: 子项应如何沿主轴放置。例如，默认情况下 MainAxisAlignment.start 将子项放置在主轴的起点（即行的左侧或列的顶部）。

来源颤动https://api.flutter.dev/flutter/widgets/Flex/mainAxisAlignment.html

crossAxisAlignment：CrossAxisAlignment.end 不起作用

crossAxisAlignment: CrossAxisAlignment.end doesn't work

flutter

flutter-layout