всплывающая панель навигации не отображается или работает правильно

#flutter #button #navigation

#трепетание #кнопка #навигация

Вопрос:

У меня есть следующий код:

   @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.

    this.setTable();

    return Scaffold(
        appBar: AppBar(
          // Here we take the value from the MyHomePage object that was created by
          // the App.build method, and use it to set our appbar title.

          title: Row(children: <Widget>[
            Image.asset(
              'images/logobig.png',
              width: 40.0,
              height: 40.0,
            ),
            Text(widget.title),
          ]),
          backgroundColor: Colors.blue,
        ),
        body: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: SingleChildScrollView(
            scrollDirection: Axis.vertical,
            child: Column(children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                  "Currency Exchange Rates",
                  textScaleFactor: 1,
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
              ),
              DataTable(
                // textDirection: TextDirection.rtl,
                // defaultVerticalAlignment: TableCellVerticalAlignment.bottom,
                // border:TableBorder.all(width: 2.0,color: Colors.red),
                showCheckboxColumn: false,
                columns: const <DataColumn>[
                  DataColumn(
                    label: Text(
                      'Symbol',
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                  ),
                  DataColumn(
                    label: Text(
                      'Buy',
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                  ),
                  DataColumn(
                    label: Text(
                      'Sell',
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                  ),
                ],
                rows: rows,
              ),
            ]),
          ),
        ),
        bottomNavigationBar: Material(
            color: Colors.white,
            child: Row(children: <Widget>[
              FlatButton(
                  onPressed: () => {},
                  color: Colors.white,
                  padding: EdgeInsets.all(10.0),
                  child: Column(
                    // Replace with a Row for horizontal icon   text
                    children: <Widget>[
                      ImageIcon(
                        AssetImage('images/dollar_world_grid_selected.png'),
                        size: 40.0,
                      ),
                      Text(
                        "Currency",
                        style:
                            TextStyle(color: Color.fromRGBO(43, 73, 193, 0.4)),
                      )
                    ],
                  )),
              FlatButton(
                  onPressed: () => {
                        Navigator.pushReplacement(
                            context,
                            new MaterialPageRoute(
                                builder: (context) => goldRate()))
                      },
                  color: Colors.white,
                  padding: EdgeInsets.all(10.0),
                  child: Column(
                    // Replace with a Row for horizontal icon   text
                    children: <Widget>[
                      ImageIcon(
                        AssetImage('images/gold-bars.png'),
                        size: 40.0,
                      ),
                      Text(
                        "Gold",
                        style: TextStyle(
                            color: Color.fromRGBO(127, 127, 127, 0.4)),
                      )
                    ],
                  )),
            ])));
  }
 

Панель buttomNavigationBar должна перемещаться между различными экранами, когда пользователь нажимает на одну из кнопок.
К сожалению, я получаю следующий результат:

введите описание изображения здесь

Как вы можете видеть, она отображается вверх. другие компоненты не отображаются, а изображения значков не отображаются. Есть идеи о том, как это исправить или другим способом сделать это? Спасибо

Ответ №1:

Замените нижнюю навигационную панель на persistentFooterButtons:

 persistentFooterButtons: <Widget>[
    new Container(
      height: 100,
      child: Row(
        children: <Widget>[
          FlatButton(
              onPressed: () => {},
              color: Colors.white,
              padding: EdgeInsets.all(10.0),
              child: Column(
                // Replace with a Row for horizontal icon   text
                children: <Widget>[
                  ImageIcon(
                    AssetImage('images/dollar_world_grid_selected.png'),
                    size: 40.0,
                  ),
                  Text(
                    "Currency",
                    style:
                        TextStyle(color: Color.fromRGBO(43, 73, 193, 0.4)),
                  )
                ],
              )),
          FlatButton(
            onPressed: () => {},
            color: Colors.white,
            padding: EdgeInsets.all(10.0),
            child: Column(
              // Replace with a Row for horizontal icon   text
              children: <Widget>[
                ImageIcon(
                  AssetImage('images/gold-bars.png'),
                  size: 40.0,
                ),
                Text(
                  "Gold",
                  style:
                      TextStyle(color: Color.fromRGBO(127, 127, 127, 0.4)),
                )
              ],
            ),
          ),
        ],
      ),
    ),
  ],
 

Если вы хотите использовать BottomNavigationBar, взгляните на пример в документации.