Ящик Flutter под панелью приложений

Я реализовал Drawer в своем Flutter приложении.

Закрыто Drawer:

Открыто Drawer:

Как видите, Drawer находится над Appbar. До того, как я запустил приложение на Flutter, у нас было собственное Android приложение с Drawer, которое раньше выглядело так:

Закрыто Drawer:

Открыто Drawer:

Вот мой код:

class MyDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return _buildDrawer(context);
  }
}

Widget _buildDrawer(BuildContext context) {
  return new Drawer(
    child: new ListView(
      children: <Widget>[
        _buildDrawerItem(context, EnumDrawerItem.PROJECT_SELECTION, Icons.home, Colors.transparent),
        new Divider(height: 20.0),
        _buildDrawerItem(context, EnumDrawerItem.TASK_LIST, Icons.home, Colors.transparent),
        new Divider(),
        _buildDrawerItem(context, EnumDrawerItem.GUIDED_TASKS, Icons.home, Colors.transparent),
        new Divider(),
        _buildDrawerItem(context, EnumDrawerItem.PHOTOS, Icons.home, Colors.transparent),
        new Divider(),
        _buildDrawerItem(context, EnumDrawerItem.DOCUMENTS, Icons.home, Colors.transparent),
        new Divider(),
        _buildDrawerItem(context, EnumDrawerItem.LOG_OUT, Icons.home, const Color(0x85bf0202)),
        new Divider(),
      ],
    ),
  );
}

Widget _buildDrawerItem(BuildContext context, EnumDrawerItem drawerItem, IconData iconData, Color color) {
  return  Container(
    color: color,
    child: new Padding(
      padding: new EdgeInsets.all(7.0),
      child: new Row(
        children: <Widget>[
          new Icon(iconData),
          new Container(
            margin: new EdgeInsets.fromLTRB(10.0, 0.0, 0.0, 0.0),
            child: new Text(
              drawerItem.toString(),
              style: styleDrawerItem,
            ),
          ),
        ],
      ),
    ),
  );
}

Я знаю, что это стандартный Material Design стиль, но клиент хочет, чтобы он оставался прежним.

Можно ли было бы реализовать это как на 2 последних скриншотах? Есть ли у вас какие-либо идеи?

Ale 26.07.2018 источник

Ответы (3)

arrow_upward
14
arrow_downward

Оберните свой основной Scaffold в другой Scaffold и используйте ящик дочернего Scaffold, также убедитесь, что для automaticallyImplyLeading установлено значение false, чтобы вы не вернули значок в AppBar

ОБНОВЛЕНИЕ: я не рекомендую этот способ из-за этой проблемы

return Scaffold(
      primary: true,
      appBar: AppBar(
        title: Text("Parent Scaffold"),
        automaticallyImplyLeading: false,
      ),
      body: Scaffold(
        drawer: Drawer(),
      ),
    );

Конечный результат :

Raouf Rahiche 26.07.2018

comment

Большое спасибо за то, что нашли время мне помочь. И последний вопрос: можно ли оставить значок Drawer в Appbar? Как вы можете видеть, есть значок drawer, когда он закрыт, и стрелка назад, когда он открыт. Спасибо! - Ale; 27.07.2018

comment

да, вы можете играть со значком в родительской панели приложений. Как вы хотите, используя свойство Leading, и как я уже упоминал в своем ответе, если вы хотите, чтобы значок был установлен автоматически. - Raouf Rahiche; 27.07.2018

comment

Хорошо, я попробую. Спасибо, я очень ценю вашу помощь :) - Ale; 27.07.2018

comment

Я удалил свойство automaticallyImplyLeading в AppBar. Теперь у меня появляется стрелка назад, когда Drawer открыт, но нет значка, когда Drawer закрыт :( Не могли бы вы проверить гифку? recordit.co/IdRFflKuEH - Ale; 27.07.2018

comment

попробуйте предоставить значок по умолчанию, используя ведущее свойство - Raouf Rahiche; 27.07.2018

arrow_upward
8
arrow_downward

Я использую ключ в шаблоне и ссылки в ведущем в основном шаблоне, как в примере

GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey();

return Scaffold(
  appBar: AppBar(
      title: Text('Draw'),
      leading: IconButton(
          icon: Icon(Icons.dehaze),
          onPressed: () {
            if (_scaffoldKey.currentState.isDrawerOpen == false) {
              _scaffoldKey.currentState.openDrawer();
            } else {
              _scaffoldKey.currentState.openEndDrawer();
            }
          })),
  body: Scaffold(
    key: _scaffoldKey,
    drawer: Drawer(),
    body: Center(
      child: Text('Drawer'),
    ),
  ),
);

Jaime 10.03.2020

arrow_upward
1
arrow_downward

Попробуй это:

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var statusBarHeight = MediaQuery.of(context).padding.top;
    var appBarHeight = kToolbarHeight;  //this value comes from constants.dart and equals to 56.0
    return Scaffold(
      drawerScrimColor: Colors.transparent,
      appBar: AppBar(),
      drawer: Container(
        padding: EdgeInsets.only(top: statusBarHeight+ appBarHeight + 1),//adding one pixel for appbar shadow
        width: MediaQuery.of(context).size.width,
        child: Drawer(),//write your drawer code
      ),
      body: AnyBody(), //add your body
      bottomNavigationBar: AnyNavigationBar(), //add your navigation bar
    );
  }
}

Aman Berkinbaev 17.02.2021

Ящик Flutter под панелью приложений

Ответы (3)

Похожие вопросы