如何在单行小部件颤动上左、中、右对齐小部件答案

【问题标题】：How to align widgets left, center, right on single row widget flutter如何在单行小部件颤动上左、中、右对齐小部件
【发布时间】：2021-03-13 12:28:14
【问题描述】：

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

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

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

这里的图片将简要描述问题。上一行是上面提到的代码，下一行是预期的输出。是否有任何解决方案可以将小部件正确地左、中和右对齐，尽管它们有内容？

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

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

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

如果你想让左右更靠近边缘，你只需要改变容器的边距。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：