Question

如何制作自定义的列表视图（如附件图像）？我需要一个列表视图，该视图可通过上下滚动来自动捕捉到项目位置。

预先感谢

Answer 1

     @override
      Widget build(BuildContext context) {
        final double statusbarHeight = MediaQuery.of(context).padding.top;
        List<String> litems = [
           "Dashboard"
        ];
        List<String> litems_icon = [
          "assets/images/sign_out.svg",
        ];

...

    Scaffold(
     body: Container(
            child: ListView.builder(
              scrollDirection: Axis.vertical,
              shrinkWrap: true,
              itemCount: litems.length,
              itemBuilder: (BuildContext context, int index) {
 Card(
      elevation: 8.0,
      margin: EdgeInsets.symmetric(horizontal: 1.0, vertical: 1.0),
      child: Container(
        decoration: BoxDecoration(color: Colors.white),
        child: ListTile(
      contentPadding: EdgeInsets.symmetric(horizontal: 5.0, vertical: 0.0),
      leading: Container(
        padding: EdgeInsets.only(right: 12.0),
        child: SvgPicture.asset(
          litems_icon[index],
          width: 40.0,
          color: const Color(0xFFE27023),
        ),
      ),
      title: Text(
        litems[index],
        style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
      ),
)
      ),
    );
              },
            ),
          ),
    )

Answer 2

我用ListWheelScrollView解决了这个问题，这就是答案：

ListWheelScrollView(
                                      controller: fixedExtentScrollControllerEvoucher,
                                      physics: FixedExtentScrollPhysics(),
                                      children: opratorsAmount.map((data) {
                                        return Container(width: double.infinity,height: 30,
                                            decoration: BoxDecoration(color: Colors.grey,border: Border.all(color:Colors.black,width: 0.5), borderRadius: new BorderRadius.all(Radius.circular(10))),
                                            child: Center(child: Text(data,style:TextStyle(color: Colors.white,fontSize: 14),textAlign: TextAlign.center)),
                                          margin: EdgeInsets.only(left:5,right:5,top:1,bottom: 1)
                                        );
                                      }).toList(),
                                    itemExtent: 45,
                                    onSelectedItemChanged: (int value){
                                        setState(() {
                                          selectedItem = value;
                                        });
                                    },
                                    useMagnifier: true,magnification: 1.2,
                                  )

opratorsAmount是一个字符串列表

如何在Flutter中创建自定义列表视图

2 个答案: