flutter FutureBuilder中列表的垂直对齐方式

wi3ka0sx  于 2023-05-23  发布在  Flutter
关注(0)|答案(1)|浏览(204)

下面的屏幕显示了从REST API检索到的类别列表。我的MainCategoryProvider会处理它。
我有一个AppBar、一个tipText(我的自定义tipText小部件)、类别列表和一个带有操作按钮和应用程序菜单的自定义BottomBar

import 'package:choooze_app/models/main_category_model.dart';
import 'package:choooze_app/providers/main_category_provider.dart';
import 'package:choooze_app/widgets/bottom_bar.dart';
import 'package:choooze_app/widgets/tip_text.dart';
import 'package:choooze_app/widgets/title.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:choooze_app/widgets/action_button.dart';

class MainCategoryListScreen extends StatelessWidget {
  final _mainCategoryProvider = Get.find<MainCategoryProvider>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: title(context, titleText: 'maincategory_list_title'.tr),
      body: Padding(
        padding: const EdgeInsets.fromLTRB(16.0, 0, 16.0, 16.0),
        child: SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              tipText(context, text: 'maincategory_list_tip'.tr),
              Expanded(
                child: FutureBuilder<List<MainCategoryModel>>(
                  future: _mainCategoryProvider.getMainCategories(),
                  builder: (context, snapshot) {
                    if (snapshot.connectionState == ConnectionState.waiting) {
                      return Center(
                        child: CircularProgressIndicator(),
                      );
                    } else if (snapshot.hasError) {
                      return Center(
                        child: Text('Error: ${snapshot.error}'),
                      );
                    } else {
                      final mainCategories = snapshot.data!;
                      return ListView.builder(
                        itemCount: mainCategories.length,
                        itemBuilder: (context, index) {
                          var mainCategory = mainCategories[index];
                          return InkWell(
                            child: Container(
                              padding:
                                  const EdgeInsets.fromLTRB(0, 5.0, 0, 5.0),
                              decoration: index < mainCategories.length - 1
                                  ? BoxDecoration(
                                      border: Border(
                                        bottom: BorderSide(
                                          color: Color(0xffcccccc),
                                        ),
                                      ),
                                    )
                                  : BoxDecoration(),
                              child: Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: [
                                  Text(Get.locale == Locale('en')
                                      ? mainCategory.nameEn
                                      : mainCategory.nameFr),
                                  Text(
                                    !mainCategory.active
                                        ? 'maincategory_detail_inactive'.tr
                                        : '',
                                    style: TextStyle(
                                      color: Color(0xFFD06706),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            onTap: () {},
                          );
                        },
                      );
                    }
                  },
                ),
              ),
              BottomBar(
                child: actionButton(
                  context,
                  buttonText: 'maincategory_list_actions_new'.tr,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

这给了我以下结果=> Capture of the screen它看起来不错,但我希望元素列表坚持到屏幕底部,绿色按钮的正上方。
我怎样才能做到这一点?
我试着玩列设置,但没有成功。如果使用MainAxisAlliance.end将ListView.builder Package 在Column小部件中,我会得到以下错误:

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderViewport#82eda NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
box.dart:1
Failed assertion: line 1966 pos 12: 'hasSize'

The relevant error-causing widget was
ListView
main_category_list_screen.dart:44
════════════════════════════════════════════════════════════════════════════════
gc0ot86w

gc0ot86w1#

如果我理解正确,并且您希望列表从底部开始,那么可以尝试在Column中的mainAxisAlignment字段中使用MainAxisAlignment.end。

Column(
  ...
  mainAxisAlignment: MainAxisAlignment.end,
  ...
);

相关问题