如何在列中对齐窗口小部件? [英] How to align a Widget within a Column?

问题描述

我想将我的按钮向右对齐.现在，我通过将 mainAxisAlignment 设置为 MainAxisAlignment.end 的行来完成此操作，如下面的示例所示.但是，这似乎不是一个好方法，因为它包含很多代码，我不认为这是这样做的方法.

I want to align my button to the right. Right now I am accomplishing it with a Row that has mainAxisAlignment set toMainAxisAlignment.end like in the example below. However that seems not a good way because it is a lot of code and I don't think that is the way of doing it.

我已经尝试过 Align 小部件，但这不起作用.我猜是因为它没有扩展内部窗口小部件，因此 Alignment.centerRight 没有任何作用.

I already tried the Align widget, but that is not working. I guess because it is not expanding the inner widget and therefore the Alignment.centerRight is doing nothing.

我现在使用的代码:

new Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisAlignment: MainAxisAlignment.end,
  children: <Widget>[
    new FlatButton(
          onPressed: _navigateToPreparationStepsWidgetClicked,
          child: new Row(
            children: <Widget>[
              new Text(
                'View Preparation Steps'.toUpperCase(),
                style: new TextStyle(
                    fontWeight: FontWeight.bold),
              ),
              new Icon(Icons.keyboard_arrow_right)
            ],
          ))
  ],
)

对齐的正确方法是什么，例如例如一个 Button Column ?

What is the proper way to align e.g. a Button within e.g. a Column?

推荐答案

仔细检查，是因为您的按钮中有一行.默认情况下，一行将展开以占据尽可能多的空间.因此，当您将按钮向右对齐时，它正在执行操作，但是按钮本身占据了整行.如果您更改颜色，则会更轻松地看到它.简单的答案是将按钮行上的mainAxisSize设置为MainAxisSize.min.

On closer inspection, it's because your button has a row in it. A row by default expands to take up as much space as possible it seems. So when you align your button to the right, it is doing it but the button itself takes up the entire row. If you changed the colour you'd see that more easily. The simple answer is to set mainAxisSize to MainAxisSize.min on the row in your button.

这与我预期的一样工作:

This works just as expected for me:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Column(
          children: <Widget>[
            FlatButton(child: Text("Default"), color: Colors.blue, onPressed: () {}),
            Align(
              child: FlatButton(child: Text("Left"), color: Colors.red, onPressed: () {}),
              alignment: Alignment.centerLeft,
            ),
            Center(child: FlatButton(child: Text("Centered"), color: Colors.orange, onPressed: () {})),
            Align(
              child: FlatButton(child: Text("Right"), color: Colors.green, onPressed: () {}),
              alignment: Alignment.centerRight,
            ),
            Align(
              child: new FlatButton(
                onPressed: () {},
                child: new Row(
                  children: <Widget>[
                    new Text(
                      'View Preparation Steps'.toUpperCase(),
                      style: new TextStyle(fontWeight: FontWeight.bold),
                    ),
                    new Icon(Icons.keyboard_arrow_right)
                  ],
                  mainAxisSize: MainAxisSize.min,
                ),
              ),
              alignment: Alignment.centerRight,
            ),
          ],
        ),
      ),
    );
  }
}

这将导致以下结果:

这篇关于如何在列中对齐窗口小部件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！