如何在颤振中进行行对齐

Question

如果我在 space 之间给出 space，如何在行中对齐 s 占据小部件之间，但我需要在左侧获得两个文本，在右侧获得另一个文本。怎么做？

Row(
    // mainAxisAlignment:
    // MainAxisAlignment.spaceBetween,
    children: [
      Container(
        child: Icon(Icons.comment),
        margin: EdgeInsets.only(left: 5.0),
      ),
      Container(
        child: Text(snapshot.data![index].comments.toString(),
            style: TextStyle(
                fontSize: 14.0, fontWeight: FontWeight.bold)),
        margin: EdgeInsets.only(left: 5.0),
      ),
      Align(
        alignment: Alignment.topRight,
        child: Text(snapshot.data![index].date.toString()),
      )
    ]),

检查描述中的图片

Answer 1

试试下面的代码希望对你有帮助。您可以使用 Spacer class

 Row(
      children: [
        Container(
          padding: EdgeInsets.all(5),
          child: Icon(Icons.comment),
        ),
        Text('6'),
        Spacer(),
        Container(
          padding: EdgeInsets.all(5),
          child: Text('Aug 4, 2021'),
        ),
      ],
    ),

您的结果屏幕->

Answer 2

你可以使用 Spacer() 来达到这个目的，像这样：

Row(
children:[
  Text("TEXT 1"),
  Text("TEXT 2"),
  Spacer(),
  Text("TEXT 3"),
  ]
)

Answer 3

使用 Expanded 小部件。

Row(
          children: [
            Container(
              child: Icon(Icons.comment),
              margin: EdgeInsets.only(left: 5.0),
            ),
            Expanded(
              child: Container(
                child: Text(
                    snapshot.data![index].comments
                        .toString(),
                    style: TextStyle(
                        fontSize: 14.0,
                        fontWeight:
                        FontWeight.bold)),
                margin: EdgeInsets.only(left: 5.0),
              ),
            ),
            Align(
              alignment: Alignment.topRight,
              child: Text(snapshot
                  .data![index].date
                  .toString()),
            ),
          ],
        ),

Answer 4

Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        Row(
          children: [
            Container(
              child: Icon(Icons.comment),
              margin: EdgeInsets.only(left: 5.0),
            ),
            Container(
              child: Text(
                snapshot.data![index].comments.toString(),
                style: TextStyle(
                  fontSize: 14.0,
                  fontWeight: FontWeight.bold,
                ),
              ),
              margin: EdgeInsets.only(left: 5.0),
            ),
          ],
        ),
        Text(snapshot.data![index].date.toString()),
      ],
    ),

我想这就是你想要的。

Answer 5

这会帮助你.. 生成图片，你可以装饰你的

Padding(
              padding: const EdgeInsets.only(right: 10,left:10),
              child: Container(
                padding: const EdgeInsets.only(left:20,right:20),
              color: Colors.blue,
              width: MediaQuery.of(context).size.width,
              height: 50,
              child: Row(
              
                children:[
                  Align(
                    alignment: Alignment.centerLeft,
                    child: Wrap(
                      children: const [
                        Icon(Icons.settings),
                        Icon(Icons.settings)
                      ]
                    ),
                  ),
                  const Spacer(),
                  const Align(
                    alignment: Alignment.centerRight,
                    child:Text('00:00'),
                  ),
                  
                ],
                
              ),
            ), 
            ),

Answer 6

 Row(
          children: [
            Expanded(
              child: Align(
                alignment: Alignment.topLeft,
                child: Row(
                  children: [
                    Container(
                      child: Icon(Icons.comment),
                      margin: EdgeInsets.only(left: 5.0),
                    ),
                    Container(
                      child: Text("6",
                          style: TextStyle(
                              fontSize: 14.0,
                              fontWeight: FontWeight.bold)),
                      margin: EdgeInsets.only(left: 5.0),
                    )
                  ],
                ),
              ),
            ),
            Expanded(
              child: Align(
                alignment: Alignment.topRight,
                child: Text("Aug 4,2021"),
              ),
            )
          ])

或

      Row(
          // mainAxisAlignment:
          // MainAxisAlignment.spaceBetween,
          children: [
            Wrap(
              children: [
                Container(
                  child: Icon(Icons.comment),
                  margin: EdgeInsets.only(left: 5.0),
                ),
                Container(
                  child: Text("6",
                      style: TextStyle(
                          fontSize: 14.0,
                          fontWeight: FontWeight.bold)),
                  margin: EdgeInsets.only(left: 5.0),
                )
              ],
            ),
            Expanded(
              child: Align(
                alignment: Alignment.topRight,
                child: Text("Aug 4,2021"),
              ),
            )
          ])

或

      Row(
          // mainAxisAlignment:
          // MainAxisAlignment.spaceBetween,
          children: [
            Expanded(
              child: Wrap(
                children: [
                  Container(
                    child: Icon(Icons.comment),
                    margin: EdgeInsets.only(left: 5.0),
                  ),
                  Container(
                    child: Text("6",
                        style: TextStyle(
                            fontSize: 14.0,
                            fontWeight: FontWeight.bold)),
                    margin: EdgeInsets.only(left: 5.0),
                  )
                ],
              ),
            ),
            Text("Aug 4,2021")
          ])

完整代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  // testIt();
  runApp(MaterialApp(home: Mainwidget()));
}

class Mainwidget extends StatefulWidget {
  const Mainwidget({Key? key}) : super(key: key);

  @override
  _MainwidgetState createState() => _MainwidgetState();
}

class _MainwidgetState extends State<Mainwidget> {
  @override
  Widget build(BuildContext context) {
    var richText = RichText(
        text: TextSpan(
            text: '*',
            style: TextStyle(
                fontSize: 25, color: Colors.red, fontWeight: FontWeight.bold)));
    return Scaffold(
      body: SafeArea(
        child: Container(
          padding: EdgeInsets.all(8.0),
          height: 100,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 16.0,vertical: 8),
                child: Row(
                  // mainAxisAlignment:
                  // MainAxisAlignment.spaceBetween,
                    children: [
                      Wrap(
                        children: [
                          Container(
                            child: Icon(Icons.comment),
                            margin: EdgeInsets.only(left: 5.0),
                          ),
                          Container(
                            child: Text("6",
                                style: TextStyle(
                                    fontSize: 14.0,
                                    fontWeight: FontWeight.bold)),
                            margin: EdgeInsets.only(left: 5.0),
                          )
                        ],
                      ),
                      Expanded(
                        child: Align(
                          alignment: Alignment.topRight,
                          child: Text("Aug 4,2021"),
                        ),
                      )
                    ]),
              )
            ],
          ),
        ),
      ),
    );
  }

  Row buildRow2() {
    return Row(
                // mainAxisAlignment:
                // MainAxisAlignment.spaceBetween,
                children: [
                  Expanded(
                    child: Wrap(
                      children: [
                        Container(
                          child: Icon(Icons.comment),
                          margin: EdgeInsets.only(left: 5.0),
                        ),
                        Container(
                          child: Text("6",
                              style: TextStyle(
                                  fontSize: 14.0,
                                  fontWeight: FontWeight.bold)),
                          margin: EdgeInsets.only(left: 5.0),
                        )
                      ],
                    ),
                  ),
                  Text("Aug 4,2021")
                ]);
  }

  Expanded buildExpanded() {
    return Expanded(
                    child: Align(
                      alignment: Alignment.topLeft,
                      child: Row(
                        children: [
                          Container(
                            child: Icon(Icons.comment),
                            margin: EdgeInsets.only(left: 5.0),
                          ),
                          Container(
                            child: Text("6",
                                style: TextStyle(
                                    fontSize: 14.0,
                                    fontWeight: FontWeight.bold)),
                            margin: EdgeInsets.only(left: 5.0),
                          )
                        ],
                      ),
                    ),
                  );
  }
}

Answer 7

这是一个直接的方法：

颤动中心行：

mainAxisAlignment: MainAxisAlignment.center //Center Column contents vertically,

flutter float right

Center(
  child: Container(
    height: 120.0,
    width: 120.0,
    color: Colors.blue[50],
    child: Align(
      alignment: Alignment.topRight,
      child: FlutterLogo(
        size: 60,
      ),
    ),
  ),
)

如何在颤振中进行行对齐

how to make row alignment in flutter

flutter

flutter-layout