Flutter 在环绕小部件上居中对齐答案

【问题标题】：Flutter align center and right on a wrap widgetFlutter 在环绕小部件上居中对齐
【发布时间】：2023-02-06 14:55:13
【问题描述】：

我正在使用 Wrap 小部件在中心和右侧对齐小部件，请查看下图我想要实现的目标。

使用 wrap 小部件而不是 Row 小部件，因为在调整屏幕大小时小部件会根据可用空间进行调整。

下面是试图获得上述结果的代码，如图所示。

Wrap(
    alignment: WrapAlignment.center,
    crossAxisAlignment: WrapCrossAlignment.center,
    runAlignment: WrapAlignment.center,
    spacing: 30.0,
    children: [
      Wrap(
        spacing: 20,
        children: const [
          Text("About Me"),
          Text("B"),
          Text("C"),
          Text("D"),
        ],
      ),
      Wrap(
        alignment: WrapAlignment.end,
        children: [
          Text("My Data"),
        ],
      ),
    ],
),

但是小部件没有正确对齐，上面的代码输出如下。

【问题讨论】：

具有嵌套包装小部件的任何特定原因也是您试图获得与顶级图像相同的原因

标签： flutter alignment

【解决方案1】：

你可能喜欢用扩展来做。

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
   
    return Row(
   
    children: [
      Expanded(
      child: SizedBox.shrink(), 
      ),
      Expanded(
         flex: 2,
        child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: const [
          Text("About Me"),
          Text("B"),
          Text("C"),
          Text("D"),
        ],
      ),),
      Expanded(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text("My Data"),
        ],
      ),),
      
    ],
);
  }
}

【讨论】：