如何在颤动中使用底部导航器'OnTap'

Question

我有一个应用程序，其中有一个列表（例如新闻）。在底部工具栏中，我有一个上一个和下一个按钮。我要做的是，如果我是**第三条新闻，并且单击了上一个按钮，它应该会显示第二则新闻。**我已经制作了工具栏，并将在下面附加代码。我添加了完整代码以更好地理解。谢谢。

class Newsdetail extends StatefulWidget {
 String  value_image, value_description, value_title;
  int index;


  Newsdetail(
      {Key key,
      @required this.value_image,
      this.value_description,
      this.value_title,
      this.index})
      : super(key: key);

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

class _newsdetail extends State<Newsdetail> {
  int _currentindex=0;
  _newsdetail();
  var tabs =[];

    loadyourNews() async {


setState(() {

  tabs = [
  Container(
    child: SingleChildScrollView(
      scrollDirection: Axis.vertical,
      child: Column(
        children: <Widget>[
          Padding(padding: const EdgeInsets.fromLTRB(5.0, 5.0, 5.0, 10.0),
            child: Row(
              children: <Widget>[
                Expanded(child:
                Image.network(widget.value_image))
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: <Widget>[
                Expanded(
                  child: Row(
                    children: <Widget>[
                      IconButton(
                          icon: Image.asset('images/facebook.png',),
                          padding: EdgeInsets.all(0.0),
                          onPressed: () {
                            _openFacebook();
                          }),
                      IconButton(
                        icon: Image.asset('images/twitter.png',),
                        padding: EdgeInsets.all(0.0),
                        onPressed: () {
                          _openTwitter();
                        },
                      ),
                      IconButton(
                        icon: Image.asset(
                          'images/whatsappicon.png', width: 180.0,
                          height: 180.0,),
                        padding: EdgeInsets.all(4.0),
                        onPressed: () {
                          _openWhatsapp();
                        },
                      )
                    ],
                  ),
                ),
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.fromLTRB(15.0, 5.0, 10.0, 10.0),
            child: Row(
              children: <Widget>[
                Expanded(
                  child: Text(
                    widget.value_title,
                    style: TextStyle(
                        fontSize: 22.0, fontWeight: FontWeight.bold),
                  ),
                ),


              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.fromLTRB(15.0, 5.0, 10.0, 10.0),
            child: Row(
              children: <Widget>[
                Expanded(
                    child: Text(
                      widget.value_description,
                      style: TextStyle(fontSize: 20.0),
                    )),
              ],
            ),
          ),
        ],
      ),
    ),
  )
];
});

  }

  @override
  void initState() {
    super.initState();
    loadyourNews();
  }
@override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text(''),
        backgroundColor: Color(0xFF125688),
        actions: <Widget>[
          Padding(
            padding: const EdgeInsets.fromLTRB(0,0,5.0,0),
            child: SizedBox(
                width: 30,
                child: FlatButton(
                    padding: EdgeInsets.all(0),
                    onPressed: (){},
                    child: Text('A+',style: TextStyle(
                        fontSize: 22.0,color: Colors.white
                    ),))),
          ),

          Padding(
            padding: EdgeInsets.fromLTRB(0,0,38.0,0),
            child: SizedBox(
                width: 30,
                child:FlatButton(
                  padding: EdgeInsets.all(0),
                  onPressed: (){},
                  child: Text('A-',style: TextStyle(
                      fontSize: 15.0,color: Colors.white
                  ),),

                )),
          )

        ],
      ),
      body: tabs[_currentindex],

      bottomNavigationBar:BottomNavigationBar(
        currentIndex: _currentindex,
        backgroundColor: Color(0xFF125688),
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.arrow_back),
            title: Text('Previous',style: TextStyle(
                color: Colors.white
            ),),
            backgroundColor: Colors.white,

          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.arrow_forward),
            title: Text('Next',style: TextStyle(
                color: Colors.white
            ),),
            backgroundColor: Colors.white,

          ),
        ],
        onTap: (index){
          setState(() {
            if (index == 0) {
              _currentindex = (_currentindex - 1) % tabs.length;
              if (_currentindex < 0) _currentindex += _currentindex;
            } else
              _currentindex = (_currentindex + 1) % tabs.length;
          });

        },
      ),

    );
  }

Answer 1

分别对下一个和上一个按钮使用Navigator.push和Navigator.pop。

Answer 2

这是您想对PageView进行的操作的示例：

class PageViewScaffoldIssue extends StatefulWidget {
  @override
  _PageViewScaffoldIssueState createState() => _PageViewScaffoldIssueState();
}

class _PageViewScaffoldIssueState extends State<PageViewScaffoldIssue> {
  PageController _pageController = PageController();
  List<String> _stringList = [
    'Page 1',
    'Page 2',
    'Page 3',
  ];

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Expanded(
          child: PageView(
            controller: _pageController,
            children: _stringList.map((item) => NewsArticle(article: item,)).toList(),
          ),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            RaisedButton.icon(
              onPressed: () => _pageController.previousPage(duration: Duration(milliseconds: 400), curve: Curves.easeInOut),
              icon: Icon(Icons.arrow_back),
              label: Text('Previous'),
            ),
            RaisedButton.icon(
              onPressed: () => addArticle(),
              icon: Icon(Icons.add),
              label: Text('Add'),
            ),
            RaisedButton.icon(
              onPressed: () => _pageController.nextPage(duration: Duration(milliseconds: 400), curve: Curves.easeInOut),
              icon: Icon(Icons.arrow_forward),
              label: Text('Next'),
            ),
          ],
        )
      ],
    );
  }

  void addArticle(){
    setState(() {
      _stringList.add('Page ${_stringList.length+1}');
    });
  }
}

class NewsArticle extends StatelessWidget {
  final String article;

  NewsArticle({
    @required this.article,
  });

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(this.article),
    );
  }
}