Flutter CircularProgressIndicator 未对齐中心答案

【问题标题】：Flutter CircularProgressIndicator not aligned centerFlutter CircularProgressIndicator 未对齐中心
【发布时间】：2023-03-16 22:10:01
【问题描述】：

不知道这里发生了什么我有mainAxisAlignment: MainAxisAlignment.center,，但仍然没有与垂直中心对齐，你可以在这里看到问题非常快，我说的是加载器而不是图像的加载器

我的代码

if (value.isLoading) {
        return Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Center(
              child: loadingWidget(),
            ),
          ],
        );
      }

这是完整的代码

return SizedBox(
  width: MediaQuery.of(context).size.width,
  child: Consumer<DogProvider>(
    builder: (context, value, child) {
      if (value.isLoading) {
        return Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Center(
              child: loadingWidget(),
            ),
          ],
        );
      }
      if (value.dogsList.isEmpty || value.error.isNotEmpty) {
        return Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Lottie.asset(
              'assets/animations/no-dog-animation.json',
              width: 500,
              height: 250,
            ),
            const Center(
              child: Padding(
                padding: EdgeInsets.fromLTRB(10, 15, 10, 0),
                child: Text(
                  "You haven't added a dog yet!",
                  style: AppStyles.noDataTextStyle,
                ),
              ),
            ),
          ],
        );
      }

      return SizedBox(
        width: double.infinity,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
              padding: const EdgeInsets.only(
                top: 65.0,
                left: 18.0,
                right: 18.0,
              ),
              child: Text(
                dogsCount(value.dogsList.length),
                style: AppStyles.listsHeaderTextStyle,
              ),
            ),
            ListView.builder(
              padding: const EdgeInsets.only(
                top: 5,
                bottom: 20,
                left: 15,
                right: 15,
              ),
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              itemCount: value.dogsList.length,
              itemBuilder: (context, index) => DogProfileCardWidget(
                dogInfo: value.dogsList[index],
                editProfile: openProfileScreen,
                dogIndex: index,
              ),
            ),
          ],
        ),
      );
    },
  ),
);

好的，问题出在 SizedBox

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

问题是 SizeBox 没有高度我通过用 sizebox 包裹装载机并给它一个高度来解决这个问题

 return SizedBox(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,

【讨论】：

不知道为什么要用屏幕大小的盒子来包装所有这些。您可以简单地返回带有 Loader 子级的 Center 小部件。布局似乎不必要地复杂。
中心小部件不起作用，这就是我所拥有的。这是由于大小框以及页面如何加载到另一个页面中
我注意到的第一件事是您的 loadingWidget 正在渲染 Top-Row-Widget（可能是 AppBar）。我还没有看到你的完整代码，我想这可能是有原因的。但是，如果您也觉得它不合适，您可以考虑使用 Column 进行主布局，子项是您的顶部小部件行和带有 Loader 的列表部分（仅由 Center 包装）。

【解决方案2】：

使用 Sizedbox Widget 进行间距

if (value.isLoading) {
        return Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxsiAlignment: CrossAxisAlignment.center,
          children: [
            const SizedBox(height: 120.0),
            Center(
              child: loadingWidget(),
            ),
          ],
        );
      }

【讨论】：