флаттер создает пользовательский интерфейс, используя стек.Плавающая кнопка должна быть над виджетом - PullRequest
0 голосов
/ 24 октября 2018

Я пытаюсь создать пользовательский интерфейс, как показано ниже.но кнопка скрывается за списком.Также сталкивается с проблемой, когда кнопка не щелкает при использовании Positioned виджета для кнопки. Пожалуйста, предложите, как создать нижний интерфейс, используя Stack виджет с ListView & Floating button.

UI

Container(
  color: Colors.grey,
  child: Column(
    children: <Widget>[
      Stack(
        children: <Widget>[
          Column(
            children: <Widget>[
              Container(
                height: 250.0,
                width: MediaQuery.of(context).size.width,
                child: Image.asset(
                  "images/1.jpg",
                  fit: BoxFit.cover,
                ),
              )
            ],
          ),
          Column(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: <Widget>[
              Container(
                height: 220.0,
              ),
              Container(
                padding: EdgeInsets.only(right: 15.0),
                child: FloatingActionButton(
                  onPressed: () {},
                  child: Icon(Icons.favorite),
                ),
              ),
            ],
          ),
          Column(
            children: <Widget>[
              Container(
                height: 250.0,
              ),
              Container(
                height: MediaQuery.of(context).size.height - 250.0,
                child: ListView.builder(
                  shrinkWrap: true,
                  itemBuilder: (context, index) {
                    return Card(
                      child: ListTile(
                        title: Text("Title $index"),
                        leading: Icon(Icons.home),
                      ),
                    );
                  },
                  itemCount: 15,
                ),
              ),
            ],
          )
        ],
      ),
    ],
  ),
);

1 Ответ

0 голосов
/ 24 октября 2018

Согласно документации (https://docs.flutter.io/flutter/widgets/Stack-class.html):

Стек рисует своих детей в порядке, когда первый ребенок находится внизу

Таким образом, ваш Stack детский порядокневерный. Ваш текущий заказ:

  • Заголовок
  • Кнопка
  • Список

Но это должно быть:

  • Заголовок
  • Список
  • Кнопка

В противном случае список перекрывается кнопкой.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...