flutter - Flutter - 在 PageView 中传递数据

问题描述

我正在尝试在我的综合浏览量的一个“页面”上键入一条消息，并希望该消息显示在另一个“页面”上。我了解如何使用两个单独的 Scaffold 小部件来完成此操作，但我很难理解如何在具有嵌套 Stack/Pageview 的单个脚手架内执行此操作。

这是我设置浏览量的地方：

class FrontOfCard extends StatefulWidget {

  String documentid;
  FirebaseImage image;

  FrontOfCard({this.documentid, this.image});

  @override
  _FrontOfCardState createState() => _FrontOfCardState();
}

class _FrontOfCardState extends State<FrontOfCard> {
  PageController _pageController = PageController(
    initialPage: 0
  );

  int currentPage = 0;

  @override
  void dispose() {
    super.dispose();
    _pageController.dispose();
  }

  _onPageChanged(int index) {
    setState(() {
      currentPage = index;
    });
  }

  //Creating the message here
  String _message;

  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(80),
        child: MainAppBar(
          text: 'front',
        ),
      ),
      body: Stack(
        alignment: AlignmentDirectional.bottomCenter,
        children: <Widget> [ PageView(
          scrollDirection: Axis.horizontal,
          controller: _pageController,
          onPageChanged: _onPageChanged,
          children: [
            Container(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Image(image: widget.image),
              ),
            ),
            InsideLeft(),
            InsideRight(message: _message), // This is where the message variable will be populated with a String
    
            EndView(message: _message),// This is where I need the message to be displayed
          ],
        ),
          Stack(
            children: <Widget> [
              Container(
                margin: const EdgeInsets.only(bottom: 35),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget> [
                    for (int i = 0; i<=3; i++)
                      if (i == currentPage)
                        SlideDots(true) else SlideDots(false)
                  ],
                ),
              ),
            ],
          ),
      ]),
    );
  }
}

这是我的 InsideRight()，我希望用户在其中输入他们的消息：

class InsideRight extends StatefulWidget {
  const InsideRight({
    @required this.message,
    Key key
  }) : super(key: key);


  final String message;

  @override
  _InsideRightState createState() => _InsideRightState(message: this.message);
}

class _InsideRightState extends State<InsideRight> {

  String message;

  _InsideRightState({
    @required this.message,
  });
  
  final myController = TextEditingController(
  );


  @override
  void dispose() {
    // Clean up the controller when the widget is disposed.
    myController.dispose();
    super.dispose();
  }


  FontWeight fontWeight = FontWeight.w400;
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            Container(
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.black26),
                ),
                width: MediaQuery.of(context).size.width * 0.8,
                height: MediaQuery.of(context).size.height * 0.7,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: TextField(
                    decoration: new InputDecoration.collapsed(
                        hintStyle: TextStyle(fontFamily: FontNameDefault),
                        hintText: ''),
                    keyboardType: TextInputType.multiline,
                    maxLines: null,
                    controller: myController,
                      onChanged:  (String _) {
                      setState(() {
                        message = _;
                      });
                    },
                  ),
                )),
          ],
        ),
      ),
    );
  }
}

还有我需要显示消息的 EndView：

    class EndView extends StatefulWidget {
  const EndView({
    @required this.message,
    Key key
  }) : super(key: key);

  final String message;


  @override
  _EndViewState createState() => _EndViewState(message: this.message);
}



class _EndViewState extends State<EndView> {

  String message;

  _EndViewState({
    @required this.message,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(message ?? 'Empty'),
      ],
    );
  }
}

有什么建议么？谢谢

标签： flutterdartpageviewsflutter-pageview

flutter - Flutter - 在 PageView 中传递数据

问题描述

解决方案

推荐阅读