无法在 Flutter 中正确对齐小部件

Posted 2023-02-23

【中文标题】无法在 Flutter 中正确对齐小部件

【英文标题】：Cant align widgets correctly in Flutter

【发布时间】：2022-01-05 17:53:49

【问题描述】：

我有以下代码，但我不知道如何将用户名对齐到左侧（图像旁边），将类文本对齐到行的右侧。 MainAxisAlignment.spaceBetween 不能解决问题。我在所有行和列上尝试了几种不同的对齐方式，但没有任何效果。我在两个文本之间获得空间的唯一方法是向其中一个文本添加填充，但这不是我们想要的，因为用户名的大小不同，并且类文本不会向右对齐。

Container(
  width: 180,
  decoration: BoxDecoration(
    color: const Color(0xffe8d9c3),
    border: Border.all(color: Colors.transparent),
    borderRadius: const BorderRadius.all(
      Radius.circular(4),
    ),
    boxShadow: const [
      BoxShadow(
        color: Colors.black,
        blurRadius: 2.0,
        spreadRadius: 0.0,
        offset: Offset(0, 1),
      ),
    ],
  ),
  child: Row(
    //mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
      const CircleAvatar(
        backgroundImage: NetworkImage(
          'https://www.woolha.com/media/2020/03/eevee.png',
        ),
      ),
      const SizedBox(
        width: 5,
      ),
      Column(
        //mainAxisAlignment: MainAxisAlignment.spaceBetween,
        //crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              StreamBuilder<DocumentSnapshot>(
                stream: userdoc.snapshots(),
                builder: (BuildContext context,
                    AsyncSnapshot<DocumentSnapshot> snapshot) 
                  return Text(
                    "$snapshot.data?["username"]",
                    style: const TextStyle(
                      fontSize: 10,
                      color: Colors.black,
                    ),
                  );
                ,
              ),
              const Text(
                "Class 8",
                style: TextStyle(
                  fontSize: 10,
                  color: Colors.black,
                ),
              ),
            ],
          ),
          Stack(
            clipBehavior: Clip.none,
            children: const [
              SizedBox(
                width: 120,
                height: 15,
                child: LinearProgressIndicator(
                  value: 0.3,
                  backgroundColor: Color(0xff816840),
                  color: Color(0xffffc518),
                ),
              ),
              Positioned(
                right: 10,
                top: 2,
                child: Text(
                  "2918",
                  style: TextStyle(
                    fontSize: 10,
                    color: Colors.white,
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    ],
  ),
)

【问题讨论】：

显示您想要实现的设计...

【参考方案1】：

import 'package:flutter/material.dart';

void main() 
  runApp(const MaterialApp(
    home: MyApp(),
  ));


class MyApp extends StatelessWidget 
  const MyApp(Key? key) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return SafeArea(
      child: Scaffold(
          body: Center(
        child: Container(
          width: 180,
          padding: EdgeInsets.all(5),
          decoration: BoxDecoration(
            color: const Color(0xffe8d9c3),
            border: Border.all(color: Colors.transparent),
            borderRadius: const BorderRadius.all(
              Radius.circular(4),
            ),
            boxShadow: const [
              BoxShadow(
                color: Colors.black,
                blurRadius: 2.0,
                spreadRadius: 0.0,
                offset: Offset(0, 1),
              ),
            ],
          ),
          child: Row(
            // crossAxisAlignment: CrossAxisAlignment.center,
            //mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              const CircleAvatar(
                backgroundImage: NetworkImage(
                  'https://www.woolha.com/media/2020/03/eevee.png',
                ),
              ),
              const SizedBox(
                width: 5,
              ),
              Expanded(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Row(
                      children: const [
                        Text(
                          "username",
                          style: TextStyle(
                            fontSize: 10,
                            color: Colors.black,
                          ),
                        ),
                        Spacer(),
                        Text(
                          "Class 8",
                          style: TextStyle(
                            fontSize: 10,
                            color: Colors.black,
                          ),
                        ),
                      ],
                    ),
                    Stack(
                      clipBehavior: Clip.none,
                      children: const [
                        SizedBox(
                          height: 15,
                          child: LinearProgressIndicator(
                            value: 0.5,
                            backgroundColor: Color(0xff816840),
                            color: Color(0xffffc518),
                          ),
                        ),
                        Positioned(
                          right: 10,
                          top: 2,
                          child: Text(
                            "2918",
                            style: TextStyle(
                              fontSize: 10,
                              color: Colors.white,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      )),
    );
  

【讨论】：

成功了，非常感谢！

【参考方案2】：

您可以在它们之间使用Spacer() 小部件