Question

我有两个屏幕A和B，屏幕A有一个底部导航栏。

将屏幕A推到屏幕B后，屏幕A的底部导航栏仍固定在屏幕B上。

我要显示全屏B，而没有屏幕A的底部导航。

这是屏幕A，它具有底部导航栏：

class Parent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TechOne',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: MyParentPage(title: 'TechOne'),
    );
  }
}

/*StatefulWidget is Widget with mutable*/
class MyParentPage extends StatefulWidget {
  MyParentPage({Key key, this.title}) : super(key: key);

  final String title;

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

/*State is a manager of StatefulWidget*/
class _MyParentPageState extends State<MyParentPage>
    with SingleTickerProviderStateMixin {
  var _itemSelected = 0;
  TabController _tabController;

  final _bodyUI = [
    HomeUI(),
    SearchUI(),
    Center(
      child: Text('Notification'),
    ),
    Center(
      child: Text('Account'),
    ),
  ];

  _onBottomNavigationBarTap(int index) {
    print(_itemSelected);
    setState(() {
      _itemSelected = index;
    });
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _tabController = TabController(length: 4, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    _tabController.animateTo(_itemSelected);

    return Scaffold(
        bottomNavigationBar: BottomNavigationBar(
          items: Values.itemsBottomNavigationBar,
          onTap: (index) {
            _onBottomNavigationBarTap(index);
          },
          currentIndex: _itemSelected,
          selectedItemColor: Colors.red,
          backgroundColor: Colors.white,
          type: BottomNavigationBarType.fixed,
        ),
        body: TabBarView(
            physics: NeverScrollableScrollPhysics(),
            controller: _tabController,
            children: <Widget>[
              _bodyUI[0],
              _bodyUI[0],
              _bodyUI[2],
              _bodyUI[3],
            ]));
  }
}

在_bodyUI [0]小部件中，我按下了屏幕B：

Navigator.push(context, MaterialPageRoute(builder: (context) => SearchUI()));

这是屏幕B，底部导航栏仍固定在此处，我想将其隐藏：

class SearchUI extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: 'Search',
      theme: ThemeData(primarySwatch: Colors.red),
      home: MySearchPage(),
    );
  }
}

class MySearchPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _MySearchState();
  }
}

class _MySearchState extends State<MySearchPage> {
  final TextEditingController _textEditingController = TextEditingController();
  final FocusNode _focusNode = FocusNode();

  TextField _appBarTitle;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    _appBarTitle = TextField(
        controller: _textEditingController,
        focusNode: _focusNode,
        autofocus: true,
        textInputAction: TextInputAction.done,
        textCapitalization: TextCapitalization.sentences,
        cursorColor: Colors.white,
        cursorRadius: Radius.circular(16),
        maxLines: 1,
        style: TextStyle(
          color: Colors.white,
        ),
        decoration: InputDecoration(
            border: InputBorder.none,
            prefixIcon: Icon(
              Icons.search,
              color: Colors.white,
            ),
            suffixIcon: IconButton(icon: Icon(Icons.clear, color: Colors.white,), onPressed: (){
              _textEditingController.clear();
            }),
            hintText: 'Search...',
            hintStyle:
                TextStyle(color: Colors.white.withOpacity(0.5), fontSize: 18)));
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: _appBarTitle,
      ),
      body: Center(
        child: Text('Search Screen'),
      ),
    );
  }
}

Answer 1

您的代码正在将SearchUI（）类作为TabBarViews之一调用：

 final _bodyUI = [
    HomeUI(),
    SearchUI(),
    Center(
      child: Text('Notification'),
    ),
    Center(
      child: Text('Account'),
    ),
  ];

这意味着将仅更改视图并将栏保持在该位置。

底部导航栏在推到新屏幕后未隐藏

1 个答案: