Question

我想将我的按钮向右对齐。现在，我通过将from django.test import TestCase class TestHelpers(object): class StoreTestCase(TestCase): ...设置为import store_a from store_test import TestHelpers class StoreATestCase(TestHelpers.StoreTestCase): ...的行来完成它，如下例所示。但是，这似乎不是一个好方法，因为它包含很多代码，我不认为这是这样做的方法。

我已经尝试过mainAxisAlignment小部件，但这没有用。我猜是因为它没有扩展内部窗口小部件，因此MainAxisAlignment.end什么也没做。

我现在使用的代码：

Align

对齐的正确方法是什么，例如{.1} Alignment.centerRight？

Answer 1

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

这与我预期的一样：

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

这将导致以下结果：

如何在列中对齐窗口小部件？

1 个答案: