как сделать весь элемент интерактивным, а не только видимые элементы?

#dart #flutter

#dart #флаттер

Вопрос:

У меня есть боковая панель, содержащая разные элементы для открытия разных экранов. Но я могу только сделать изображение и текстовое представление интерактивными, а не весь элемент.

       _myDrawer() => Drawer(
             child: Column(
            children: <Widget>[
          Expanded(
            child: ListView(
          // Important: Remove any padding from the ListView.
             padding: EdgeInsets.zero,
             children: <Widget>[
             DrawerHeader(
               child: _myDrawerHeader(),
               decoration: BoxDecoration(
                 color: const Color(0xFF0ea0aa),
               ),
             ),
              Container(
                 width: double.infinity,
                 child: GestureDetector(
                     onTap: () {
                       Navigator.push(context,
                           MaterialPageRoute(builder: (context) {
                         return TermNCondition();
                       }));
                     },
                     child: Row(
                       children: <Widget>[
                         _drawerItem('images/ic_tc.png', 'Terms amp; 
                           Conditions'),
                         _addDivider(Colors.grey)
                       ],
                     ))),
          ],
         ));




           _drawerItem(String imagePath, String title) => 
        Row(children: <Widget>[
         Container(
          padding: EdgeInsets.only(left: 12, right: 8, top: 10, 
           bottom: 10),
        child: Image(
          image: AssetImage(imagePath),
          height: 22,
          width: 22,
         ),
        ),
       Container(
       padding: EdgeInsets.only(left: 8, right: 8, top: 10, bottom: 
        10),
        child: Text(
          title,
          style: _textStyle,
         ),
         ),
        ]);


         _addDivider(Color color) => Padding(
      padding: EdgeInsets.only(left: 12, right: 12),
       child: Divider(
        height: 1,
        color: color,
     ),
   );

Нажмите на значок и текст «Условия и положения» работает нормально, но весь вид не доступен для просмотра. введите описание изображения здесь

Ответ №1:

Вам нужно обернуть GestureDector с помощью FittedBox. этот виджет поможет вам масштабировать дочерний элемент до родительского размера

  _myDrawer() => Drawer(
         child: Column(
        children: <Widget>[
      Expanded(
        child: ListView(
      // Important: Remove any padding from the ListView.
         padding: EdgeInsets.zero,
         children: <Widget>[
         DrawerHeader(
           child: _myDrawerHeader(),
           decoration: BoxDecoration(
             color: const Color(0xFF0ea0aa),
           ),
         ),
          Container(
             width: double.infinity,
             child: GestureDetector(
                 onTap: () {
                   Navigator.push(context,
                       MaterialPageRoute(builder: (context) {
                     return TermNCondition();
                   }));
                 },
                 child: FittedBox( //
  fit: BoxFit.cover  // here is the magic
  child:Row(
                   children: <Widget>[
                     _drawerItem('images/ic_tc.png', 'Terms amp; 
                       Conditions'),
                     _addDivider(Colors.grey)
                   ],
                 ))
     )),
      ],
     ));




       _drawerItem(String imagePath, String title) => 
    Row(children: <Widget>[
     Container(
      padding: EdgeInsets.only(left: 12, right: 8, top: 10, 
       bottom: 10),
    child: Image(
      image: AssetImage(imagePath),
      height: 22,
      width: 22,
     ),
    ),
   Container(
   padding: EdgeInsets.only(left: 8, right: 8, top: 10, bottom: 
    10),
    child: Text(
      title,
      style: _textStyle,
     ),
     ),
    ]);


     _addDivider(Color color) => Padding(
  padding: EdgeInsets.only(left: 12, right: 12),
   child: Divider(
    height: 1,
    color: color,
 ),
 );

Для получения дополнительной информации об этом виджете, пожалуйста, посмотрите документы здесь

1. Текст и изображение заняли все пространство и выглядят не так, как требуется. Кроме того, за пределами текста и изображения он по-прежнему недоступен для просмотра.

Ответ №2:

вам просто нужно изменить порядок контейнера и гестердетектора. Я попробовал, и это работает довольно хорошо.

 GestureDetector(
        onTap: () {
              Navigator.push(context,
                  MaterialPageRoute(builder: (context) {
                    return TermNCondition();
                  }));
            },
        child: Container(
          width: double.infinity,
          child: Row(
                children: <Widget>[
                  _drawerItem('images/ic_tc.png', 'Terms amp; 
                      Conditions'),
                      _addDivider(Colors.grey)
                ],
              ),
        ),
      ),