Flutter 使用 child 小部件中的控制器

Question

我是 Flutter 的新手，几天前我运行加入了 carousel_slider 包。

doc 中提供的示例之一是手动控制滑块，但是当我更改小部件的构建方式时，我失去了 onPressed 功能，因为 child 小部件不知道_controller 是。这是将信息从状态传递到 child 的正确方法，因此 child 可以调用 _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

        ],
      ),
    );
  }
}

child定义：

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

您可以将 _controller 作为可选参数传递给 imageSelector。

Answer 2

在 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

        ],
      ),
    );
  }
}

和child：

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"),
                  ),
                ),
              ),
            ],
          );
}

Flutter 使用 child 小部件中的控制器

Flutter Using Controller from a child widget

carousel

flutter