在Flutter中集中Listview.builder项

ajsxfq5m  于 2023-06-30  发布在  Flutter
关注(0)|答案(1)|浏览(138)

我试图在屏幕上的顶部中心对齐我的列表是由ListView。builder(它是一个初学者todoApp项目),按照部分代码:

Align(
            alignment: Alignment.topCenter,
            child: ListView.builder(
                shrinkWrap: true,
                itemCount: widget.todoList.length,
                itemBuilder: (context, index){
                  return 
                      Align(
                        alignment: Alignment.bottomCenter,
                        child: ListTile(
                          // ignore: prefer_const_constructors
                          leading: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              ElevatedButton(
                                style: ElevatedButton.styleFrom(
                                  backgroundColor: Colors.transparent,
                                  elevation: 0,
                                  shadowColor: Colors.transparent
                                ),
                                onPressed: (){
                                  setState(() {
                                  widget.todoList[index].state=!widget.todoList[index].state;
                                }); 
                                },
                                child: (widget.todoList[index].state==true?
                                 Ink(
                                  decoration: ShapeDecoration(
                                    color: Colors.green,
                                    shape: RoundedRectangleBorder(
                                      borderRadius:BorderRadius.circular(0),
                                      side: const BorderSide(
                                        color: Colors.black,
                                        width: 2,
                                        )
                                      )
                                    ),
                                    child: const SizedBox(
                                      width: 16,
                                      height: 16,
                                    ),
                                ):
                                Ink(
                                  decoration: ShapeDecoration(
                                    color: Colors.grey,
                                    shape: RoundedRectangleBorder(
                                      borderRadius:BorderRadius.circular(0),
                                      side: const BorderSide(
                                        color: Colors.black,
                                        width: 2,
                                        )
                                      )
                                    ),
                                    child: const SizedBox(
                                      width: 16,
                                      height: 16,
                                    ),
                                )))
                            ],
                          ),
                          title: Text(widget.todoList[index].name,style: const TextStyle(fontWeight:FontWeight.bold),),
                        ),
                      );
                }
              ),

我试图 Package 这两个listview.builder和listTile与中心或对齐和所有尝试失败,当我把中心和对齐在listview它的项目得到左中心,我想顶部中心

nqwrtyyt

nqwrtyyt1#

我希望这段代码能解决你的问题。

Align(
  alignment: Alignment.topCenter,
  child: Container(
    height: 80,
    child: ListView.builder(
      shrinkWrap: true,
      itemCount: widget.todoList.length,
      itemBuilder: (context, index) {
        return Align(
          alignment: Alignment.bottomCenter,
          child: ListTile(
            // ignore: prefer_const_constructors
            leading: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.transparent,
                    elevation: 0,
                    shadowColor: Colors.transparent
                  ),
                  onPressed: () {
                    setState(() {
                      widget.todoList[index].state = !widget.todoList[index].state;
                    });
                  },
                  child: (widget.todoList[index].state == true
                      ? Ink(
                          decoration: ShapeDecoration(
                            color: Colors.green,
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(0),
                              side: const BorderSide(
                                color: Colors.black,
                                width: 2,
                              ),
                            ),
                          ),
                          child: const SizedBox(
                            width: 16,
                            height: 16,
                          ),
                        )
                      : Ink(
                          decoration: ShapeDecoration(
                            color: Colors.grey,
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(0),
                              side: const BorderSide(
                                color: Colors.black,
                                width: 2,
                              ),
                            ),
                          ),
                          child: const SizedBox(
                            width: 16,
                            height: 16,
                          ),
                        )),
              ],
            ),
            title: Text(widget.todoList[index].name,
                style: const TextStyle(fontWeight: FontWeight.bold)),
          ),
        );
      },
    ),
  ),
);

相关问题