翩翩从子部件中使用控制器

Question

我对Flutter相当陌生，几天前我遇到了carousel_slider包。

中提供的一个例子。文档 是一个手动控制的滑块，但是当我改变部件的构建方式时，我失去了onPressed功能，因为子部件不知道_controller是什么。哪种方式才是正确的将信息从状态传递给子程序，以便子程序可以调用_controller.nextPage()、_controller.previousPage()或_controller.animateToPage()？

class ManuallyControlledSlider extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _ManuallyControlledSliderState();
  }
}

class _ManuallyControlledSliderState extends State<ManuallyControlledSlider> {
  final CarouselController _controller = CarouselController();

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Manually controlled slider')),
      body: Column(
        children: <Widget>[
          CarouselSlider(
            items: imageSliders,
            options: CarouselOptions(enlargeCenterPage: true, aspectRatio: 16/9),
            carouselController: _controller,
          ),
          imageSelector(), //MAIN ISSUE

        ],
      ),
    );
  }
}

子程序的定义。

class imageSelector extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
return Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Flexible(
                child: RaisedButton(
                  onPressed: () => _controller.previousPage(
                      duration: Duration(milliseconds: 300), curve: Curves.linear),
                  child: Text('←'),
                ),
              ),
              Flexible(
                child: RaisedButton(
                  onPressed: () => _controller.nextPage(
                      duration: Duration(milliseconds: 300), curve: Curves.linear),
                  child: Text('→'),
                ),
              ),
              ...Iterable<int>.generate(imgList.length).map(
                (int pageIndex) => Flexible(
                  child: RaisedButton(
                    onPressed: () => _controller.animateToPage(
                        pageIndex,
                        duration: Duration(milliseconds: 300),
                        curve: Curves.linear),
                    child: Text("$pageIndex"),
                  ),
                ),
              ),
            ],
          );
}

Answer 1

在imageSelector小组件中创建一个变量来访问控制器，比如。

class imageSelector extends StatelessWidget {
final CarouselController _controller;
imageSelector(this._controller);

现在，当你调用imageSelector时，把控制器的值作为一个参数传给它，比如：

imageSelector(_controller)

所以你的正确代码应该是：

对于ManuallyControlledSlider，

class ManuallyControlledSlider extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _ManuallyControlledSliderState();
  }
}

class _ManuallyControlledSliderState extends State<ManuallyControlledSlider> {
  final CarouselController _controller = CarouselController();

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Manually controlled slider')),
      body: Column(
        children: <Widget>[
          CarouselSlider(
            items: imageSliders,
            options: CarouselOptions(enlargeCenterPage: true, aspectRatio: 16/9),
            carouselController: _controller,
          ),
          imageSelector(_controller), //Corrected

        ],
      ),
    );
  }
}

还有子控件

class imageSelector extends StatelessWidget {
final CarouselController _controller;
imageSelector(this._controller);
  @override
  Widget build(BuildContext context) {
return Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Flexible(
                child: RaisedButton(
                  onPressed: () => _controller.previousPage(
                      duration: Duration(milliseconds: 300), curve: Curves.linear),
                  child: Text('←'),
                ),
              ),
              Flexible(
                child: RaisedButton(
                  onPressed: () => _controller.nextPage(
                      duration: Duration(milliseconds: 300), curve: Curves.linear),
                  child: Text('→'),
                ),
              ),
              ...Iterable<int>.generate(imgList.length).map(
                (int pageIndex) => Flexible(
                  child: RaisedButton(
                    onPressed: () => _controller.animateToPage(
                        pageIndex,
                        duration: Duration(milliseconds: 300),
                        curve: Curves.linear),
                    child: Text("$pageIndex"),
                  ),
                ),
              ),
            ],
          );
}

Answer 2

你可以通过 _controller 作为一个可选参数，用于 imageSelector.