为啥文本元素居中以及如何在 Dart 中将其与右侧对齐

Posted 2023-03-05

【中文标题】为啥文本元素居中以及如何在 Dart 中将其与右侧对齐

【英文标题】：Why is a Text element centered and how to align it to the right in Dart为什么文本元素居中以及如何在 Dart 中将其与右侧对齐

【发布时间】：2021-07-12 12:54:18

【问题描述】：

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

应该更改/添加什么代码以使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,
                            )),
                      ]),
                    )
                  ],
                ),                    
              ],
            )
        )
    )
);

【参考方案1】：

这是因为行或列对齐。

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

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

如果这不能解决您的问题，请检查： Under which circumstances textAlign property works in Flutter?

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

【参考方案2】：

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

例如：

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

【参考方案3】：

根据 Column-Class 上的https://api.flutter.dev/flutter/widgets/Column-class.html，Column 小部件不会滚动（通常，如果 Column 中的子项数量超过可用房间的容量，则会被认为是错误的）。如果您有一行小部件并希望它们能够在空间不足时滚动，请考虑使用 ListView。有关水平变体，请参阅行。 此外，如果您只有一个孩子，请考虑使用 Align 或 Center 来定位孩子。

对于您的情况，您可以将属性 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,
                        ),
                    ],
                ),
            ),
        );
    

希望，这会有所帮助！