dart Flutter -如何在PageView Widget中的页面之间传递数据?

xbp102n0  于 2023-05-26  发布在  Flutter
关注(0)|答案(2)|浏览(223)

我有一个像下面这样的PageView小部件:

Widget buildPageView() {
    return PageView(
      controller: pageController,

      onPageChanged: (index) {
        pageChanged(index);
      },

      children: <Widget>[
        AddPropertyDescription(pageController: pageController,),
        AddPropertyMedia(pageController: pageController),
        AddPropertyLocation(pageController: pageController),
        AddPropertyDetails(pageController: pageController),
        AddPropertyAmenities(pageController: pageController)
      ],
    );
  }

我有五个页面作为一个小部件在我的PageView,现在我想通过数据从一个页面到另一个,直到最后一页时,页面更改.....
我已经采取了Next按钮在每个页面,在下一步按钮onTap()我只是增加页码滑动到下一页如下

onTap: () async{
                  pageController.animateToPage(
                    1,
                    duration: Duration(milliseconds: 300),
                    curve: Curves.linear,
                  );
              },

当按下下下一个按钮并进入下一个屏幕时,我想携带数据并将其传递到下一页。
有没有人在这里谁可以面对同样的问题在Flutter.....
请指导我如何才能做到这一点……

vjrehmav

vjrehmav1#

Page小部件可以获取数据,以及用于传递数据的回调函数,我将解释我的意思。
buildPageView应该向小部件传递额外的参数:

int data = 0;

void onDataChange(int newData) {
  setState(() => data = newData);
}

Widget buildPageView() {
    return PageView(
      controller: pageController,

      onPageChanged: (index) {
        pageChanged(index);
      },

      children: <Widget>[
        AddPropertyDescription(pageController: pageController, data: data, onDataChange: onDataChange),
        AddPropertyMedia(pageController: pageController, data: data, onDataChange: onDataChange),
        AddPropertyLocation(pageController: pageController, data: data, onDataChange: onDataChange),
        AddPropertyDetails(pageController: pageController, data: data, onDataChange: onDataChange),
        AddPropertyAmenities(pageController: pageController, data: data, onDataChange: onDataChange)
      ],
    );
  }

小部件本身应该接受以下参数:

class MyWidget extends StatelessWidget {
  const MyWidget({
    @required this.data,
    @required this.onDataChange,
    Key key,
  }) : super(key: key);

  final int data;
  final Function(int) onDataChange;
  
  @override
  Widget build(BuildContext context) {
    return FlatButton(
      onPressed: () => onDataChange(data + 1),
      child: Text(data.toString()),
    );
  }
}
hwamh0ep

hwamh0ep2#

我想说的是你的情况下是真正适合Provider
下面是一个简单的演示与PageView和提供者,你可以复制和测试:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class ProviderPageViewDemoPage extends StatefulWidget {
  const ProviderPageViewDemoPage({Key? key}) : super(key: key);

  @override
  State<ProviderPageViewDemoPage> createState() =>
      _ProviderPageViewDemoPageState();
}

class _ProviderPageViewDemoPageState extends State<ProviderPageViewDemoPage> {
  final _pageController = PageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('PageView with Provider')),
      body: ChangeNotifierProvider(
        create: (BuildContext context) => _DataModel(),
        child: PageView(
          controller: _pageController,
          children: const [
            _MyWidget(backgroundColor: Colors.red),
            _MyWidget(backgroundColor: Colors.green),
          ],
        ),
      ),
    );
  }
}

class _DataModel with ChangeNotifier {
  int _count = 0;
  int get counter => _count;
  void increment() {
    _count++;
    notifyListeners();
  }
}

class _MyWidget extends StatefulWidget {
  const _MyWidget({Key? key, required this.backgroundColor}) : super(key: key);

  final Color backgroundColor;

  @override
  State<_MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<_MyWidget>
    with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    // get the dataModel
    final _dataModel = Provider.of<_DataModel>(context);
    return Container(
      color: widget.backgroundColor,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(_dataModel.counter.toString()),
          ElevatedButton(
            child: const Text('add'),
            onPressed: () {
              // change data
              _dataModel.increment();
            },
          ),
        ],
      ),
    );
  }
}

相关问题