Flutter Drawer: удалить пустое пространство - PullRequest
0 голосов
/ 21 января 2020

Я установил липкий заголовок в своем ящике. Но теперь я получил пустое пространство между заголовком и первым элементом ListTile. Как я могу удалить это место / установить элементы в конец заголовка?

Спасибо за вашу помощь! (Мне пришлось удалить некоторые ListTiles, потому что это было много кода для stackoverflow)

drawer: Drawer(
  child: Column(
      children: [
        Expanded(
          flex: 1,
          child: Container(
            width: MediaQuery.of(context).size.width * 0.85,
            child: DrawerHeader(
          decoration: BoxDecoration(
          gradient: LinearGradient(
          begin: Alignment.topRight,
          end: Alignment.bottomLeft,
          colors: [Colors.blue, Colors.red])
        ),
        child: Center (child:  Text('Title', style: TextStyle(color: Colors.white, fontWeight: FontWeight.w700, fontSize: 30.0)),),

            ),
          ),
        ),
        Expanded(
          flex: 2,
          child: ListView(children: [
           ListTile(
        leading: Icon(Icons.wb_sunny),
        title: Text('Menu 1'),
        trailing: Icon(Icons.keyboard_arrow_right),
        onTap: () {print("Hallo");},
        ),
        Divider(height: 1, thickness: 0.5, color: Colors.grey,),
        ListTile(
        leading: Icon(Icons.wb_sunny),
        title: Text('Menu 2'),
        trailing: Icon(Icons.keyboard_arrow_right),
        onTap: () {print("Hallo");},
        ),
        Divider(height: 1, thickness: 0.5, color: Colors.grey,),
        ListTile(
        leading: Icon(Icons.wb_sunny),
        title: Text('Menu 3'),
        trailing: Icon(Icons.keyboard_arrow_right),
        onTap: () {print("Hallo");},
        ),
        Divider(height: 1, thickness: 0.5, color: Colors.grey,),
          ]),
        )
      ],
    ),
    ),        

Ответы [ 4 ]

0 голосов
/ 21 января 2020

ListView имеет заполнение по умолчанию. Установите для свойства padview listview значение 0, и пробел исчез:

drawer: Drawer(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Expanded(
              flex: 1,
              child: Container(
                width: MediaQuery.of(context).size.width * 0.85,
                child: DrawerHeader(
                  decoration: BoxDecoration(
                      gradient: LinearGradient(
                          begin: Alignment.topRight,
                          end: Alignment.bottomLeft,
                          colors: [Colors.blue, Colors.red])),
                  child: Center(
                    child: Text('Title',
                        style: TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.w700,
                            fontSize: 30.0)),
                  ),
                ),
              ),
            ),
            Expanded(
              flex: 2,
              child: ListView(
                children: [
                  ListTile(
                    leading: Icon(Icons.wb_sunny),
                    title: Text('Menu 1'),
                    trailing: Icon(Icons.keyboard_arrow_right),
                    onTap: () {
                      print("Hallo");
                    },
                  ),
                  Divider(
                    height: 1,
                    thickness: 0.5,
                    color: Colors.grey,
                  ),
                  ListTile(
                    leading: Icon(Icons.wb_sunny),
                    title: Text('Menu 2'),
                    trailing: Icon(Icons.keyboard_arrow_right),
                    onTap: () {
                      print("Hallo");
                    },
                  ),
                  Divider(
                    height: 1,
                    thickness: 0.5,
                    color: Colors.grey,
                  ),
                  ListTile(
                    leading: Icon(Icons.wb_sunny),
                    title: Text('Menu 3'),
                    trailing: Icon(Icons.keyboard_arrow_right),
                    onTap: () {
                      print("Hallo");
                    },
                  ),
                  Divider(
                    height: 1,
                    thickness: 0.5,
                    color: Colors.grey,
                  ),
                ],
                padding: EdgeInsets.only(top: 0),
              ),
            )
          ],
        ),
      ),
0 голосов
/ 21 января 2020

Оберните ваш listTile виджет с Inkwell виджетом, вот так. это уменьшит пространство

     InkWell(
              onTap: () {print("Hello");},
              child: ListTile(
                leading: Icon(Icons.wb_sunny),
                title: Text('Menu 2'),
                trailing: Icon(Icons.keyboard_arrow_right),
              ),
            ),
0 голосов
/ 21 января 2020

Установите для поля DrawerHeader значение 0

...
                  child: DrawerHeader(
                    margin: EdgeInsets.all(0),
                    decoration: BoxDecoration(
                        gradient: LinearGradient(
                            begin: Alignment.topRight,
                            end: Alignment.bottomLeft,
                            colors: [Colors.blue, Colors.red])),
                    child: Center(
                      child: Text('Title', 
...
0 голосов
/ 21 января 2020

Полагаю, проблема в DrawerHeader. Я бы просто использовал Контейнер с некоторыми отступами.

Другое дело, что вы завернули Контейнер DrawerHeader в Расширенное. Расширенное будет пытаться получить все доступное пространство. Так что в случае также попробуйте перейти к Flexible с другим FlexFit.

Drawer(
    child: Column(
      children: [

        Container(
          padding: const EdgeInsets.symmetric(vertical: 16),
          width: MediaQuery.of(context).size.width * 0.85,
          decoration: BoxDecoration(
              gradient: LinearGradient(
                  begin: Alignment.topRight,
                  end: Alignment.bottomLeft,
                  colors: [Colors.blue, Colors.red])),
          child: Center(
            child: Text(
              'Title',
              style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.w700,
                  fontSize: 30.0),
            ),
          ),
        ),
        Expanded(
          child: ListView(children: [
            ListTile(
              leading: Icon(Icons.wb_sunny),
              title: Text('Menu 1'),
              trailing: Icon(Icons.keyboard_arrow_right),
              onTap: () {
                print("Hallo");
              },
            ),

          ]),
        )
      ],

DartPad здесь для окончательного примера.

...