Flutter - Стек с эшафотом

В настоящее время я использую Scaffold с BottomNavigationBar в проекте, и мне нужно отобразить отдельный виджет поверх всего этого.

Пытался создать стек при возврате сборки и поместить этот виджет и скаффолд в качестве дочерних, но виджет просто не отображается (не отображается вообще)! Сообщений об ошибках тоже нет.

Что могло быть не так? Или есть другой подход? (вызов AlertDialog для этой цели не сработает).

Определение Stack в теле Scaffold также не сработало, так как ему нужен список для BottomNavigationBar.

    Widget build(BuildContext context) {
        var Test = Center(
          child: SizedBox(width: 100, height: 100,
          child: Container(
              color: Colors.blue,
              child: Text("Test"),),),);
      return Stack(
        alignment: Alignment.center,
        children: [
          Test,
          Scaffold(
            appBar: ..... (rest of the code)

2 ответа

Решение

Как упоминалось в @HBS, проблема была вызвана упорядочением стека, но исправления можно достичь, просто изменив порядок виджетов:

Widget build(BuildContext context) {
    var Test = Center(
      child: SizedBox(width: 100, height: 100,
      child: Container(
          color: Colors.blue,
          child: Text("Test"),),),);
  return Stack(
    alignment: Alignment.center,
    children: [
      Scaffold(
        appBar: ..... (rest of the code),
        Test,
        ],

Это потому, что ваш Scaffold нарисован поверх вашего тестового виджета. Стек берет несколько дочерних элементов и упорядочивает их снизу вверх. Итак, первый элемент - самый нижний, а последний - самый верхний. Попробуйте следующее:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        alignment: Alignment.center,
        children: <Widget>[
          Scaffold(
            appBar: AppBar(title: Text('Hi')),
          ),
          TestWidget(),
        ],
      ),
    );
  }
}

class TestWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      color: Colors.blue,
      child: Center(
        child: Text("Test"),
      ),
    );
  }
}
Другие вопросы по тегам