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

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

点击图标和文本“条款和条件”工作正常，但整个 View 不可点击。 enter image description here

Answer 1

您需要用 FittedBox 包裹 GestureDector。这个小部件可以帮助您将 child 缩放到 parent 的大小

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

有关此 Widget 的更多信息，请查找文档 here