为什么 Text 元素居中以及如何在 Dart 中将其右对齐

Question

我有一个应该向左对齐的文本元素，但由于某种原因它看起来居中，我不明白为什么。

应该更改/添加什么代码才能使 result 字符串右对齐？

return Positioned(
    bottom: 0,
    right: 0,
    left: 0,
    child: Align(
        alignment: Alignment.bottomCenter,
        child: Container(
            margin: EdgeInsets.fromLTRB(10, 0, 10, 30),
            padding: EdgeInsets.all(10),
            child: Column(
              children: <Widget>[
                //First row here. The one below is the second row:
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Container(
                      padding: EdgeInsets.only(left: 5.0),
                      child: Icon(Icons.comment),
                    ),
                    Expanded(
                      child: Column(children: [
                        Padding(
                            padding: EdgeInsets.only(
                                top: 10.0, left: 5.0, right: 0),
                            child: Text(
                              result, //This text is centered. Why?
                              maxLines: 7,
                              overflow: TextOverflow.ellipsis,
                            )),
                      ]),
                    )
                  ],
                ),                    
              ],
            )
        )
    )
);

Answer 1

您可以为此目的使用方向。

例如：

MaterialApp(
  builder: (context, child) {
    return Directionality(
      textDirection: TextDirection.rtl,
      child: child,
    );
  },
);

Answer 2

这是因为行或列对齐。

默认情况下，子列居中，要更改该更新：

Column(
    crossAxisAlignment: CrossAxisAlignment.end,
    children: [
        ...

如果这不能解决您的问题，请检查：

有关 column/row 对齐的更多信息： https://medium.com/jlouage/flutter-row-column-cheat-sheet-78c38d242041

Answer 3

根据 Column-Class 上的 https://api.flutter.dev/flutter/widgets/Column-class.html，Column 小部件不会滚动（通常认为 Column 中的 children 多于将适合的内容是错误的在可用的房间）。如果您有一排小部件并希望它们能够在空间不足的情况下滚动，请考虑使用 ListView。有关水平变体，请参阅行。另外，如果你只有一个 child，那么考虑使用 Align 或 Center 来定位 child.

对于您的情况，您可以将属性 crossAxisAlignment 添加到您的列中，如下所示

... Column(crossAxisAlignment: CrossAxisAlignment.end, ...

如@nuts 所述，因此文本将右对齐。这是一个完整的例子，也是来自 https://api.flutter.dev/flutter/widgets/Expanded-class.html 下的上述参考，我只是修改它来说明如何做：

    /// Flutter code sample for Expanded

// This example shows how to use an [Expanded] widget in a [Column] so that
// its middle child, a [Container] here, expands to fill the space.
//
// ![This results in two thin blue boxes with a larger amber box in between.](https://flutter.github.io/assets-for-api-docs/assets/widgets/expanded_column.png)
import 'package:flutter/material.dart';

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

/// This is the main application widget.
class MyApp extends StatelessWidget {
    const MyApp({
        Key ? key
    }): super(key: key);

    static
    const String _title = 'Flutter Code Sample';

    @override
    Widget build(BuildContext context) {
        return const MaterialApp(
            title: _title,
            home: MyStatelessWidget(),
        );
    }
}

/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
    const MyStatelessWidget({
        Key ? key
    }): super(key: key);

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: const Text('Expanded Column Sample'),
            ),
            body: Center(
                child: Column(
                    children: < Widget > [
                        Container(
                            color: Colors.blue,
                            height: 100,
                            width: 100,
                        ),
                        Expanded(
                            child: Container(
                                color: Colors.amber,
                                width: 100,
                            ),
                        ),
                        Column(
                            crossAxisAlignment: CrossAxisAlignment.end,
                            children: < Widget > [
                                Text('We moved this text to the right')
                            ],
                        ),
                        Container(
                            color: Colors.blue,
                            height: 100,
                            width: 100,
                        ),
                    ],
                ),
            ),
        );
    }
}

希望这会有所帮助！

为什么 Text 元素居中以及如何在 Dart 中将其右对齐

Why is a Text element centered and how to align it to the right in Dart

android

alignment

dart

flutter