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

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

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

应该更改/添加哪些代码以使 result 字符串向右对齐？

return Positioned(
    bottom: 0,right: 0,left: 0,child: Align(
        alignment: Alignment.bottomCenter,child: Container(
            margin: EdgeInsets.fromLTRB(10,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,)),]),)
                  ],],)
        )
    )
);

解决方法

您可以为此使用方向。

例如：

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

,

这是因为行或列对齐。

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

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

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

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

,

根据 Column-Class 上的 https://api.flutter.dev/flutter/widgets/Column-class.html，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,Column(
                            crossAxisAlignment: CrossAxisAlignment.end,children: < Widget > [
                                Text('We moved this text to the right')
                            ],Container(
                            color: Colors.blue,],);
    }
}

希望，这会有所帮助！