flutter 可滚动警报对话框顶部的固定容器

cpjpxq1n  于 2023-06-24  发布在  Flutter
关注(0)|答案(1)|浏览(137)

我需要将内容固定到可滚动警报对话框的顶部。我试着用几种方法来做到这一点,但我只设法使对话框的所有内容都可以滚动。第一个视频显示了它是如何发生的今天和第二个显示或多或少我想发生的事情,但与不同的是,固定的部分必须在顶部。
为了解决这个问题,我使用了操作,但操作总是在警报对话框的底部,我真的需要它在顶部。我将提供视频,以便更容易解决问题:
如何(应该是最高固定信息):

如何使用操作将信息固定在底部:

代码:

AlertDialog(
            scrollable: true,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(20),
            ),
            // insetPadding: EdgeInsets.zero,
            contentPadding: EdgeInsets.zero,
            content: Consumer<ShowNsuImageProvider>(
              builder: (BuildContext context, value, Widget? child) {
                return Container(
                  width: MediaQuery.of(context).size.width - 80,
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      GestureDetector(
                          onTap: (){
                            Navigator.of(context).pop();
                          },
                          child: Container(
                            padding: EdgeInsets.only(left: 20, right: 20, top: 20),
                              child: Icon(Icons.close, color: Color.fromRGBO(51, 51, 51, 1))
                          )
                      ),
                      
                      Container(
                        padding: EdgeInsets.only(left: 20, right: 20, bottom: 20),
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            Text(
                              "Onde encontrar o NSU do equipamento?",
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                fontSize: 14,
                                fontFamily: "OpenSans",
                                color: Color.fromRGBO(51, 51, 51, 1),
                                fontWeight: FontWeight.bold
                              ),
                            ),

                            SizedBox(height: 30),

                            Container(
                              alignment: Alignment.centerLeft,
                              child: Text(
                                "Selecione o modelo do equipamento:",
                                style: TextStyle(
                                    fontSize: 12,
                                    fontFamily: "OpenSans",
                                    color: Color.fromRGBO(51, 51, 51, 1),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),

                      Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        for(int i = 0; i < nsuEquipmentImageList.length; i++)
                          Column(
                            children: [
                              Container(
                                padding: EdgeInsets.only(left: 20, right: 20, top: i == 0 ? 0 : 15, bottom: 15),
                                child: Column(
                                  children: [
                                    GestureDetector(
                                      onTap: (){
                                        isEquipmentSelectedToShowNsuImageList[i] = !isEquipmentSelectedToShowNsuImageList[i];
                                        value.setListEquipmentSelectedToShowNsuImage(isEquipmentSelectedToShowNsuImageList);
                                        isEquipmentSelectedToShowNsuImageList = value.getIsEquipmentSelectedListToShowNsuImage;
                                      },
                                      child: Row(
                                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                        children: [
                                          Container(
                                            child: Text(
                                              nsuEquipmentImageList[i]["name"],
                                              style: TextStyle(
                                                  fontSize: 14,
                                                  fontFamily: "OpenSans",
                                                  color: Color.fromRGBO(51, 51, 51, 1)
                                              ),
                                            ),
                                          ),
                                          Icon(value.getIsEquipmentSelectedListToShowNsuImage[i] ? Icons.keyboard_arrow_up_outlined : Icons.keyboard_arrow_down_outlined , color: Colors.black)
                                        ],
                                      ),
                                    ),
                                    Visibility(
                                      visible: value.getIsEquipmentSelectedListToShowNsuImage[i],
                                      child: Column(
                                        children: [
                                          SizedBox(height: 20),
                                          Container(
                                            height: MediaQuery.of(context).size.width-170,
                                            width: MediaQuery.of(context).size.width-130,
                                            decoration: BoxDecoration(
                                                image: DecorationImage(
                                                    image: AssetImage(nsuEquipmentImageList[i]["image"]),
                                                    fit: BoxFit.cover
                                                ),
                                                border: Border.all(color: Colors.black),
                                                borderRadius: BorderRadius.circular(10)
                                            ),
                                          )
                                        ],
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                              Container(height: 0.5, color: Colors.black)
                            ],
                          ),
                        SizedBox(height: 20)
                      ],
                        )
                    ],
                  ),
                );
              }
            ),
          );

有人能帮我吗

8gsdolmq

8gsdolmq1#

在使用scrollable: true时,它使内容可滚动,包括title。在AlertDialog内容中使用ListView,创建约束问题。您可以在上面使用LayoutBuilder并根据需要提供约束。

showDialog(
  context: context,
  builder: (context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final width = constraints.maxWidth;
        final height = constraints.maxHeight;
        return AlertDialog(
          title: Text("Top Part"),
          content: SizedBox(
            width: width,
            height: height,
            child: ListView(
              children: List.generate(
                33,
                (index) => SizedBox(
                  height: 100,
                  child: Text(index.toString()),
                ),
              ),
            ),
          ),
        );
      },
    );
  },
);

另一种方法是在SingleChildScrollView中使用Column on

showDialog(
  context: context,
  builder: (context) {
    return AlertDialog(
      title: Text("Top Part"),
      content: SingleChildScrollView(
        child: Column(
          children: List.generate(
            33,
            (index) => SizedBox(
              height: 100,
              child: Text(index.toString()),
            ),
          ),
        ),
      ),
    );
  },
);

相关问题