“`dart flutter: 强制ListView.builder填充所有可用空间 “`

huangapple go评论125阅读模式
英文:

flutter: force listview.builder fill all free space

问题

我尝试强制ListView.builder填充屏幕的所有可用空间(使其可滚动到屏幕的所有可用空间)。我的代码如下:

Column(
  children: [
    widget,
    widget,
    Expanded(
      child: ListView.builder(
        itemCount: medOrganizations.length,
        padding: EdgeInsets.fromLTRB(35, 0, 35, 0),
        itemBuilder: (BuildContext context, int index) {
          return Container(
            padding: EdgeInsets.all(15),
            child: GestureDetector(
              onTap: () async {
                appointmentModel.clinicOid = medOrganizations[index].id!;
                var medSpec = await _appointmentService.getSpecialities(appointmentModel.cityId!, appointmentModel.clinicOid!);
                if (medSpec.statusCode == 200) {
                  medSpecialities = medSpec.result!;
                  stage = 2;
                  selectClinic = false;
                  selectSpecialist = true;
                  clinic = "${medOrganizations[index].nameFull}";
                  setState(() {});
                }
              },
              child: Column(
                children: [
                  Text(
                    "${medOrganizations[index].nameFull}",
                    style: GoogleFonts.roboto(
                      color: Colors.black,
                      fontWeight: FontWeight.bold,
                      fontSize: 20.resizeFont(context),
                    ),
                  ),
                  SizedBox(height: 5),
                  Text(
                    "${medOrganizations[index].nameShort}, ${medOrganizations[index].adress}",
                    style: TextStyle(fontSize: 18.resizeFont(context)),
                  ),
                  Divider(),
                ],
              ),
            ),
          );
        },
      ),
    ),
  ],
)

这个示例可以工作,但它不会填充整个屏幕。我尝试使用FlexExpanded,但总是收到错误信息:"错误:RenderFlex的子项具有非零的flex,但传入的高度约束未被界定"。

英文:

i tried to force listview.builder fill all free space (make scrollable to all free space) in screen
my code :

                     Column(
                     children:[
                     widget,
                     widget,
                     SizedBox(
                              width: MediaQuery.of(context).size.width,
                              height:
                                  MediaQuery.of(context).size.height,
                              child: ListView.builder(
                                itemCount: medOrganizations.length,
                                padding: EdgeInsets.fromLTRB(35, 0, 35, 0),
                                itemBuilder:
                                    (BuildContext context, int index) {
                                  return Container(
                                      padding: EdgeInsets.all(15),
                                      child: GestureDetector(
                                        onTap: () async {
                                          appointmentModel.clinicOid =
                                              medOrganizations[index].id!;
                                          var medSpec =
                                              await _appointmentService
                                                  .getSpecialities(
                                                      appointmentModel
                                                          .cityId!,
                                                      appointmentModel
                                                          .clinicOid!);
                                          if (medSpec.statusCode == 200) {
                                            medSpecialities =
                                                medSpec.result!;
                                            stage = 2;
                                            selectClinic = false;
                                            selectSpecialist = true;
                                            clinic =
                                                "${medOrganizations[index].nameFull}";
                                            setState(() {});
                                          }
                                        },
                                        child: Column(
                                          children: [
                                            Text(
                                              "${medOrganizations[index].nameFull}",
                                              style: GoogleFonts.roboto(
                                                  color: Colors.black,
                                                  fontWeight:
                                                      FontWeight.bold,
                                                  fontSize: 20
                                                      .resizeFont(context)),
                                            ),
                                            SizedBox(
                                              height: 5,
                                            ),
                                            Text(
                                                "${medOrganizations[index].nameShort}, ${medOrganizations[index].adress}",
                                                style: TextStyle(
                                                    fontSize: 18.resizeFont(
                                                        context))),
                                            Divider(),
                                          ],
                                        ),
                                      ));
                                },
                              ),
                            )])

this example, works but it doesn't fill all screen. I tried use Flex and Expanded, but always receive an error : "Error: RenderFlex children have non-zero flex but incoming height constraints are unbounded"

答案1

得分: 0

如果您的 column 沒有 scrollable 父部件,那麼您可以使用 Expanded,它可以佔用屏幕的所有可用空間。
試試這段代碼:

Column(
  children: [
    widget,
    widget,
    Expanded( // <--------------------- 移除 Sized Box,用 Expanded 包裹
      child: ListView.builder(
        itemCount: medOrganizations.length,
        padding: EdgeInsets.fromLTRB(35, 0, 35, 0),
        itemBuilder: (BuildContext context, int index) {
          return Container(
            padding: EdgeInsets.all(15),
            child: GestureDetector(
              onTap: () async {
                appointmentModel.clinicOid = medOrganizations[index].id!;
                var medSpec = await _appointmentService.getSpecialities(
                  appointmentModel.cityId!,
                  appointmentModel.clinicOid!,
                );
                if (medSpec.statusCode == 200) {
                  medSpecialities = medSpec.result!;
                  stage = 2;
                  selectClinic = false;
                  selectSpecialist = true;
                  clinic = "${medOrganizations[index].nameFull}";
                  setState(() {});
                }
              },
              child: Column(
                children: [
                  Text(
                    "${medOrganizations[index].nameFull}",
                    style: GoogleFonts.roboto(
                      color: Colors.black,
                      fontWeight: FontWeight.bold,
                      fontSize: 20.resizeFont(context),
                    ),
                  ),
                  SizedBox(
                    height: 5,
                  ),
                  Text(
                    "${medOrganizations[index].nameShort}, ${medOrganizations[index].adress}",
                    style: TextStyle(
                      fontSize: 18.resizeFont(context),
                    ),
                  ),
                  Divider(),
                ],
              ),
            ),
          );
        },
      ),
    ),
  ],
)
英文:

If your column has not scrollable parent widget. Then you can use Expanded. Which can take all free space of the screen.
Try this code:

Column(
                children:[
                  widget,
                  widget,
                  Expanded( &lt;---------------------  remove sized box and wrap with expanded
                    child: ListView.builder(
                      itemCount: medOrganizations.length,
                      padding: EdgeInsets.fromLTRB(35, 0, 35, 0),
                      itemBuilder:
                          (BuildContext context, int index) {
                        return Container(
                            padding: EdgeInsets.all(15),
                            child: GestureDetector(
                              onTap: () async {
                                appointmentModel.clinicOid =
                                medOrganizations[index].id!;
                                var medSpec =
                                await _appointmentService
                                    .getSpecialities(
                                    appointmentModel
                                        .cityId!,
                                    appointmentModel
                                        .clinicOid!);
                                if (medSpec.statusCode == 200) {
                                  medSpecialities =
                                  medSpec.result!;
                                  stage = 2;
                                  selectClinic = false;
                                  selectSpecialist = true;
                                  clinic =
                                  &quot;${medOrganizations[index].nameFull}&quot;;
                                  setState(() {});
                                }
                              },
                              child: Column(
                                children: [
                                  Text(
                                    &quot;${medOrganizations[index].nameFull}&quot;,
                                    style: GoogleFonts.roboto(
                                        color: Colors.black,
                                        fontWeight:
                                        FontWeight.bold,
                                        fontSize: 20
                                            .resizeFont(context)),
                                  ),
                                  SizedBox(
                                    height: 5,
                                  ),
                                  Text(
                                      &quot;${medOrganizations[index].nameShort}, ${medOrganizations[index].adress}&quot;,
                                      style: TextStyle(
                                          fontSize: 18.resizeFont(
                                              context))),
                                  Divider(),
                                ],
                              ),
                            ));
                      },
                    ),
                  )])

huangapple
  • 本文由 发表于 2023年4月7日 05:33:10
  • 转载请务必保留本文链接:https://go.coder-hub.com/75953949.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定