使容器可点击

Question

我想让整行都可点击，但只有点击Text 或Icon 时才会显示打印。

 Padding(
            padding: EdgeInsets.only(top: 15.0, left: 10.0, right: 10.0),
            child: Container(
                width: double.infinity,
                padding: EdgeInsets.only(top: 15.0, bottom: 15.0),
                decoration: BoxDecoration(
                    border: Border.all(width: 0.5),
                    borderRadius: BorderRadius.all(Radius.circular(15.0))),
                child: GestureDetector(
                  onTap: () {
                    print('click');
                  },
                  child: Row(
                    children: <Widget>[
                      Padding(
                        child: Text(
                          Localization.of(context).location,
                          style: TextStyle(fontSize: 18),
                        ),
                        padding: EdgeInsets.only(left: 10.0),
                      ),
                      Spacer(),
                      Padding(
                        child: Container(
                          child: Icon(Icons.locations),
                          height: 25.0,
                        ),
                        padding: EdgeInsets.only(right: 15.0),
                      )
                    ],
                  ),
                )))

Answer 1

@John Joe，我认为让 Container 可点击的最简单方法是使用 InkWell 作为，

InkWell(
  child: Container(
    padding: const EdgeInsets.all(10.0),
    decoration: BoxDecoration(
      border: Border.all(width: 1.0, color: Colors.grey),
      borderRadius: BorderRadius.all(Radius.circular(5.0))
    ),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text('Locations', style: TextStyle(color: Colors.grey)),
        Icon(Icons.edit_location, color: Colors.grey)
      ])),
  onTap: () {
    setState(() {
      text = 'Locations Tapped!';
    });
  },
) 

希望这会有所帮助。

Answer 2

试试这个：

Padding(
  padding: EdgeInsets.only(top: 15.0, left: 10.0, right: 10.0),
  child: GestureDetector(
    onTap: () {
      print('click');
    },
    child: Container(
      width: double.infinity,
      padding: EdgeInsets.only(top: 15.0, bottom: 15.0),
      decoration: BoxDecoration(border: Border.all(width: 0.5), borderRadius: BorderRadius.all(Radius.circular(15.0))),
      child: Row(
        children: <Widget>[
          Padding(
            child: Text(
              Localization.of(context).location,
              style: TextStyle(fontSize: 18),
            ),
            padding: EdgeInsets.only(left: 10.0),
          ),
          Spacer(),
          Padding(
            child: Container(
              child: Icon(Icons.locations),
              height: 25.0,
            ),
            padding: EdgeInsets.only(right: 15.0),
          )
        ],
      ),
    ),
  ),
);

Answer 3

在 GestureDetector 中附上小部件（可能是代码 sn-p 中的填充小部件）。基本上，将 GestureDetector 从当前级别移动到您希望检测到点击的 Widget。