dart - 滚动 Controller 未附加到任何 ScrollView

Question

我将 scrollController 附加到 listView 构建器。我正在使用 Slider 控制滚动。但是我收到错误“滚动 Controller 未附加到任何 ScrollView ”。如果我将 Slider 的最大值设置为某个静态值错误消失但如果我设置 max = scrollController.position.maxScrollExtent 它给出错误。

 scrollController = ScrollController(initialScrollOffset: 0.0);
 scrollController.addListener(scrollListener);
Container(
            decoration: BoxDecoration(color: Colors.black),
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            child: ListView.builder(
              controller: scrollController,
              scrollDirection: Axis.horizontal,
              itemCount: totalSegments,
              itemBuilder: (BuildContext context, int index) {
                return Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[

                    Container(
                      height: 70.0,
                      width: 148.0,
                      margin: EdgeInsets.only(top: 10.0),
                      decoration: BoxDecoration(
                        color: Colors.grey[800],
                      ),
                      child: Row(
                        children: <Widget>[
                          Container(
                            width: 20.0,
                            decoration: BoxDecoration(color: Colors.grey[900]),
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                              children: <Widget>[
                                Container(
                                  width: 7.0,
                                  height: 7.0,
                                  decoration:
                                      BoxDecoration(color: Colors.white),
                                ),
                                Container(
                                  width: 7.0,
                                  height: 7.0,
                                  decoration:
                                      BoxDecoration(color: Colors.white),
                                ),
                                Container(
                                  width: 7.0,
                                  height: 7.0,
                                  decoration:
                                      BoxDecoration(color: Colors.white),
                                ),
                              ],
                            ),
                          ),
                          Expanded(
                            child: Container(
                              decoration: BoxDecoration(
                                color: Colors.black,
                                borderRadius: BorderRadius.circular(5.0),
                              ),
                              margin:
                                  new EdgeInsets.only(top: 1.0, bottom: 1.0),
                              child: selectedSegment[index] != null
                                  ? SizedBox(
                                      height: double.infinity,
                                      width: double.infinity,
                                      child: Center(
                                          child: Container(
                                        decoration: BoxDecoration(
                                          image: DecorationImage(
                                            fit: BoxFit.fill,
                                            image: NetworkImage(
                                                selectedSegment[index]
                                                    ['segmentUrl']),
                                          ),
                                        ),
                                      )),
                                    )
                                  : Container(),
                            ),
                          ),
                        ],
                      ),
                    ),
                    Container(
                      width: 148.0,
                      height: MediaQuery.of(context).size.height - 130.0,
                      child: ListView(
                        scrollDirection: Axis.vertical,
                        children: buildSegmentList(index),
                      ),
                    ),
                  ],
                );
              },
            ),
          ),

Answer 1

试试这段代码，我在 ListView 中得到了 bottom 和 up 事件状态..

class ScrollViewDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
  home: ScrollViewTest(),
);
}
}

class ScrollViewTest extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return ScrollViewState();
}
}

class ScrollViewState extends State<ScrollViewTest> {
ScrollController _controller;
String message = "";

_scrollListener() {
if (_controller.offset >= _controller.position.maxScrollExtent &&
    !_controller.position.outOfRange) {
  setState(() {
    message = "reach the bottom";
  });
}
if (_controller.offset <= _controller.position.minScrollExtent &&
    !_controller.position.outOfRange) {
  setState(() {
    message = "reach the top";
  });
 }
}

@override
void initState() {
_controller = ScrollController();
_controller.addListener(_scrollListener);
super.initState();
}

@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
  appBar: AppBar(
    title: Text("Scrollview Demo"),
  ),
  body: Column(
    children: <Widget>[
      Container(
        height: 50.0,
        color: Colors.green,
        child: Center(
          child: Text(message),
        ),
      ),
      Expanded(
        child: ListView.builder(
          controller: _controller,
          itemCount: 30,
          itemBuilder: (context, index) {
            return ListTile(title: Text("Index : $index"));
          },
        ),
      ),
    ],
  ),
);
}
}