Flutter 将小部件放置在中间，并在右侧添加一些文本 我试图制作进度条，我想把进度条放在中间，旁边有一个文本，但我不知道

我不希望两个元素都集中在进度条上

我得到的结果是：

我期待的结果是：

我的代码：

import 'package:flutter/material.dart';

class ProgressBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text("Progress Bar"),
        Row(mainAxisAlignment: MainAxisAlignment.center, children: [
          Container(
            decoration: BoxDecoration(
                color: Colors.grey, borderRadius: BorderRadius.circular(4)),
            alignment: Alignment.centerLeft,
            width: 95,
            height: 6,
            child: Container(
              decoration: BoxDecoration(
                  color: Colors.red, borderRadius: BorderRadius.circular(4)),
              width: 47.5,
            ),
          ),
          Text('50 %'),
        ]),
      ],
    );
  }
}

---

以下是我用您的代码尝试的内容：

Column(
  children: [
    Row(children: [
      Expanded(
        child: Center(
          child: Text("Progress Bar"),
        ),
        flex: 2,
      ),
      Expanded(
        child: Container(),
      ),
    ]),
    Row(children: [
      Expanded(
        child: Container(
          decoration: BoxDecoration(
              color: Colors.grey, borderRadius: BorderRadius.circular(4)),
          alignment: Alignment.centerLeft,
          width: 95,
          height: 6,
          child: Container(
            decoration: BoxDecoration(
                color: Colors.red, borderRadius: BorderRadius.circular(4)),
            width: 47.5,
          ),
        ),
        flex: 2,
      ),
      Expanded(
        child: Center(
          child: Text('50 %'),
        ),
      ),
    ]),
  ],
);

给出以下布局：

---

我猜这就是你想要实现的。看看我是如何使用

Expanded

来平衡每行中的约束的。基本逻辑是将进度条文本和进度条放在同一列中，并赋予该列相同的宽度，因此使用相同的flex扩展。由于您希望50%与进度条位于同一行中，因此我在其上方添加了一个空的“单元格”，以保持位置不变。这基本上类似于使用

列

和

行

创建一个表，因为需要对齐

进度条

文本和实际的

条

，所以需要将它们包装在

列

中

class ProgressBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FittedBox(child: Row(
      children: [
        Padding(
          padding: const EdgeInsets.only(bottom: 16),
          child: FittedBox(
            child: Column(mainAxisAlignment: MainAxisAlignment.start, children: [
              Text("Progress Bar"),
              Container(
                decoration: BoxDecoration(
                  color: Colors.grey, borderRadius: BorderRadius.circular(4)),
                alignment: Alignment.centerLeft,
                width: 95,
                height: 6,
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.red,
                    borderRadius: BorderRadius.circular(4)),
                  width: 47.5,
                ),
              ),
            ]),
          ),
        ),
        Text('50 %'),
      ],
    ));
  }
} 

然后，您可以将此内容和您的

文本

包装在

行中

class ProgressBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FittedBox(child: Row(
      children: [
        Padding(
          padding: const EdgeInsets.only(bottom: 16),
          child: FittedBox(
            child: Column(mainAxisAlignment: MainAxisAlignment.start, children: [
              Text("Progress Bar"),
              Container(
                decoration: BoxDecoration(
                  color: Colors.grey, borderRadius: BorderRadius.circular(4)),
                alignment: Alignment.centerLeft,
                width: 95,
                height: 6,
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.red,
                    borderRadius: BorderRadius.circular(4)),
                  width: 47.5,
                ),
              ),
            ]),
          ),
        ),
        Text('50 %'),
      ],
    ));
  }
} 

在这里，我们使用

填充

使

文本

小部件稍微向底部移动。

FittedBox

s用于避免

列和
行占用所有可用空间

结果