在Flutter中自定义滚动条

时间:2019-08-12 12:12:55

标签: flutter dart

我试图在Flutter中构建滚动条,但我找到了一个自定义程序包,但它仍然没有我需要的所有功能。例如,我希望它具有边框,而对于当前边框,我无法将其放在列表视图的末尾。 How the scrollbar should look like.

到目前为止,我的代码是,但即使没有边框,它也不会按预期的那样工作,当列表扩展时,滚动条几乎位于扩展列表的中间:

SingleChildScrollView(
      child: Column(
        children: <Widget>[
          Container(
              width: MediaQuery.of(context).size.width * 0.5,
              child: DraggableScrollbar.rrect(
                  controller: myScrollController,
                  alwaysVisibleScrollThumb: true,
                  heightScrollThumb: MediaQuery.of(context).size.width * 0.5,
                  backgroundColor: AppColors().barColor,
                  padding: EdgeInsets.only(left: 150, right: 50),
                  child: ListView.builder(
                      controller: myScrollController,
                      shrinkWrap: true, //Added
                      itemCount: zones.length,
                      itemBuilder: (BuildContext context, int index) {
                        Zone zone = zones[index];
                        List<Place> places = zone.places;
                        return Column(
                          children: <Widget>[
                            ExpansionTile(
                              onExpansionChanged: (bool expanding) =>
                                  setState(() => zone.isExpanded = expanding),
                              trailing: Icon(
                                Icons.arrow_downward,
                                color: Colors.transparent,
                              ),
                              title: Container(
                                padding: EdgeInsets.only(
                                    left: 20.0, top: 10, bottom: 10),
                                decoration: BoxDecoration(
                                  color: zone.isExpanded
                                      ? Colors.black12
                                      : Colors.transparent,
                                  borderRadius: BorderRadius.circular(15.0),
                                ),
                                child: Row(
                                  children: <Widget>[
                                    Text(
                                      '${zone.name}',
                                      style: TextStyle(
                                        fontSize: 20,
                                        color: Colors.black,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                              children: <Widget>[
                                ListView.builder(
                                    shrinkWrap: true,
                                    itemCount: zone.places.length,
                                    itemBuilder: (BuildContext context,
                                        int nestedIndex) {
                                      return Column(
                                        children: <Widget>[
                                          Container(
                                              child: ListTile(
                                            title: Row(
                                              children: <Widget>[
                                                Text(
                                                  '${places[nestedIndex].name}',
                                                  style:
                                                      TextStyle(fontSize: 20),
                                                ),
                                              ],
                                              mainAxisAlignment:
                                                  MainAxisAlignment.center,
                                            ),
                                          ))
                                        ],
                                      );
                                    })
                              ],
                            )
                          ],
                        );
                      })))
        ],
      ),
    );

And the output looks like this.

0 个答案:

没有答案