第一个屏幕的底部导航栏交易屏幕

Question

我正在尝试从一个屏幕导航到另一个屏幕，就像将在 android 部分中解释的那样。为了实现底部导航栏，我使用了第一个片段中的片段，我点击该按钮时有一个按钮，我的第一个屏幕正在移动到导航栏的第二个选项卡，就像这样..

((NavigationActivity) getActivity()).navigation.setSelectedItemId(R.id.navigation_screen2);

片段中的以上行。同样如何在flutter中开发。提前致谢。

Answer 1

Home.dart 文件。您需要回调 onTabTapped 函数。

import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  final Function onTapped;  // CallBack Function

  Home({this.onTapped});

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

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Container(
        child: Column(
          children: <Widget>[
            Container(
              child: Column(
                children: <Widget>[
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Container(
                        margin: EdgeInsets.only(top: 16),
                        child: Text('WELCOME TO',
                            style: TextStyle(
                                fontSize: 24,
                                color: Color.fromRGBO(0, 0, 0, 1),
                                fontWeight: FontWeight.bold),
                            textAlign: TextAlign.center),
                      )
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Container(
                        margin: EdgeInsets.only(top: 10),
                        child: Text('Travelize',
                            style: TextStyle(
                              fontSize: 24,
                              color: Color.fromRGBO(35, 192, 103, 1),
                              fontWeight: FontWeight.bold,
                            ),
                            textAlign: TextAlign.center),
                      )
                    ],
                  ),
                  new Container(
                    margin: EdgeInsets.only(top: 80),
                    child: new MaterialButton(
                        padding: EdgeInsets.all(10.0),
                        child: Text("CHECK-IN"),
                        color: Color.fromRGBO(35, 192, 103, 1),
                        textColor: Colors.white,
                        onPressed: () {}),
                  ),
                  Center(child: _cardView()),
                  new Container(
                    margin: EdgeInsets.all(10),
                    child: new MaterialButton(
                        padding: EdgeInsets.all(10.0),
                        child: Text("MY VISIT"),
                        color: Color.fromRGBO(35, 192, 103, 1),
                        textColor: Colors.white,
                        onPressed: () {}),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget _lineView() {
    return new Container(
      height: 1.5,
      margin: EdgeInsets.all(5),
      color: const Color.fromRGBO(195, 195, 195, 1),
    );
  }

  Widget _cardView() {
    return Card(
        margin: EdgeInsets.only(top: 40, right: 40, left: 40),
        child: Column(
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new Container(
                    width: 50,
                    height: 50,
                    margin: EdgeInsets.only(top: 26),
                    child: Image.asset('assets/brandLogos/app_logo.png'))
              ],
            ),
            _lineView(),
            Container(
              padding: EdgeInsets.all(10),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    'You have',
                    style: TextStyle(fontSize: 16),
                  ),
                  Text(
                    ' 0 meetings',
                    style: TextStyle(
                        fontSize: 16, color: Color.fromRGBO(35, 192, 103, 1)),
                  ),
                  Text(
                    ' today',
                    style: TextStyle(fontSize: 16),
                  )
                ],
              ),
            ),
            _lineView(),
            new Container(
              margin: EdgeInsets.all(5),
              child: new MaterialButton(
                  child: Text("VIEW"),
                  color: Color.fromRGBO(35, 192, 103, 1),
                  textColor: Colors.white,
                  onPressed: () {
                    setState(() {
                      print(
                          '----dddddddddd------------clicked----------------');
                      widget.onTapped(1);  // Added this.

//                      dashBoardObj.DashboardScreen d =
//                          new dashBoardObj.DashboardScreen();
//                      d.createState().pageController.animateToPage(2,
//                          duration: Duration(milliseconds: 300),
//                          curve: Cubic(1, 1, 1, 1));
                    });
                  }),
            ),
          ],
        ));
  }
}

在你的DashboardScreen.dart

return Scaffold(
      appBar: AppBar(
        title: Text(appBarTitle),
      ),
//      body: _children[_currentIndex],
      body: pageView = new PageView(
        physics: new NeverScrollableScrollPhysics(),
        children: [
          Home(
            onTapped: onTabTapped,  // pass your function here
          ),
     ......

第一个屏幕的底部导航栏交易屏幕

Bottom navigation bar transaction screens from first screen

flutter

flutter-test

flutter-layout