Question

我有一个包含不同项目的边栏以打开不同的屏幕。但是我只能使图像和textview可以点击，而不是整个项目。

      _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 & 
                           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,
     ),
   );

单击图标和文字“条款和条件”可以正常工作，但不能单击整个视图。enter image description here

Answer 1

您需要使用FittedBox包裹GestureDector。此小部件可帮助您将孩子缩放到父母的大小

 _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 & 
                       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,
 ),
 );

有关此小部件的更多信息，请查找文档here

Answer 2

您只需要更改容器和GesterDetector的顺序。我试过了，效果很好。

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 & 
                      Conditions'),
                      _addDivider(Colors.grey)
                ],
              ),
        ),
      ),

如何使整个项目可点击而不是仅可见项目？

2 个答案: