如何在单行小部件上左对齐、居中、右对齐 flutter

Question

我需要一些可以将我的小部件在单行小部件中左对齐、居中和右对齐的东西。 现在我已经为我的行小部件使用mainAxisAlignment:MainAxisAlignment.spaceBetween, 。 但是在这里，当我的左侧小部件有一些大内容时， spaceBetween可以将我的中心小部件对齐到右侧，这会破坏我的应用程序设计。

是否有任何选项可以Align小部件用于 Row 中的多个小部件？

return Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    Container(
      margin: EdgeInsets.only(left: 15.0),
      height: 27.0,
      child: Container(
        child: Center(
          child: Text(
            'TestDataTest',
          ),
        ),
      ),
    ),
    Container(
      height: 27.0,
      child: Container(
        child: Center(
          child: Text(
            'Test',
          ),
        ),
      ),
    ),
    Container(
      margin: EdgeInsets.only(right: 15.0),
      height: 27.0,
      child: Container(
        child: Padding(
          child: Center(
            child: Text(
              'T',
            ),
          ),
        ),
      ),
    ),
  ],
);

此处图像将简要描述该问题。 上一行是上述代码，下一行是预期的 output。是否有任何解决方案可以将小部件正确地左对齐、居中和右对齐，不管它们的内容如何？

Answer 1

你可以像这样使用小部件结构

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Container(
          alignment: Alignment.center,
          margin: EdgeInsets.all(24),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Row1(),
              Row2(),
            ],
          ),
        ),
      ),
    );
  }
}

class Row1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(8),
      color: Colors.orange,
      height: 48,
      child: Row(
        children: <Widget>[
          Expanded(
            child: Align(
              alignment: Alignment.centerLeft,
              child: Container(
                color: Colors.white,
                child: Text('TestDataTest'),
              ),
            ),
          ),
          Expanded(
            child: Align(
              alignment: Alignment.center,
              child: Container(
                color: Colors.white,
                child: Text('Test'),
              ),
            ),
          ),
          Expanded(
            child: Align(
              alignment: Alignment.centerRight,
              child: Container(
                color: Colors.white,
                child: Text('T'),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
class Row2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(8),
      color: Colors.orange,
      height: 48,
      child: Row(
        children: <Widget>[
          Expanded(
            child: Align(
              alignment: Alignment.centerLeft,
              child: Container(
                color: Colors.white,
                child: Text('LIVE'),
              ),
            ),
          ),
          Expanded(
            child: Align(
              alignment: Alignment.center,
              child: Container(
                color: Colors.white,
                child: Text('LIVE'),
              ),
            ),
          ),
          Expanded(
            child: Align(
              alignment: Alignment.centerRight,
              child: Container(
                color: Colors.white,
                child: Text('\$ 80'),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 2

一种方法是调整各个容器的宽度。 那可能行得通。 当您提供 MainAxisAlignment.spaceBetween 时，会根据可用空间和小部件数量进行自动调整。

Answer 3

这是我发现的最简单的方法，它非常适合您放入的内容

Container(
   margin: EdgeInsets.symmetric(horizontal: 20),
      child: Row(
          children: [
             Text(
               'Left'
             ),
             Spacer(),
             Text(
               'Center'
             ),
             Spacer(),
             Text(
               'Right'
             ),
           ],
         ),
      ),

如果您希望左右更靠近边缘，您只需要更改 Container 的边距。

Answer 4

在 Row 小部件内部，一个 Right side 和一个 Center，这是简单的代码。

Row(
            children: [
              SizedBox(),//use this 
              Expanded( //center widget expanded
                child: Text(
                  "Add Text",
                  style: const TextStyle(
                      color: Colors.white,
                      fontSize: 18.0,
                      fontFamily: 'poppins_regular'),
                  textAlign: TextAlign.center,
                ),
              ),
              Container(
                child: Icon(Icons.delete,color: Colors.white,),
              ),

            ],
          ),