Flutter AppBar尾部图像按钮大小调控

Flutter AppBar尾部图像按钮大小调控

有志者，事竟成，破釜沉舟，百二秦关终属楚；
苦心人，天不负，卧薪尝胆，三千越甲可吞吴。

目录

• 简单IconButton实现
• 自定义图片IconButton
• 使用Container实现范围响应
• GestureDetector实现
• GestureDetector实现（改良）
• 最后说一句

简单IconButton实现

一般情况下，我们Flutter开发的时候会在AppBar的尾部加上一些IconButton组件，实现起来还是比较入门的：

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Icon(Icons.arrow_back_ios),
        actions: [
          IconButton(
            icon: Icon(Icons.menu),
            onPressed: (){
              print("I Pressed the Iconbutton");
            },
          ),
        ]
      ),
      body: Text("Just a Simple test"),
    );
  }

返回目录

自定义图片IconButton

如果想实现IconButton里面的图像使用图像，实现起来也不是很难：

这里为了方便使用了网络图片

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          actions: [
            IconButton(
              icon: getImage(),
              onPressed: (){
                print("I Pressed the Iconbutton");
              },
            ),
          ],
        ),
        body: Text("Just a Simple test"),
      );
  }
  //添加图片作为Icon的组件
  Widget getImage(){
    return Image.network(
      'https://s1.ax1x.com/2020/04/29/JoGLjA.png',
      fit: BoxFit.cover,
      width: 24.0,
      matchTextDirection: false,
    );
  }

返回目录

使用Container实现范围响应

可以采用Container在外部包装，让响应范围变大，但是实际情况往往相反，希望响应范围仅限于图片本身，所以这个实现算是比较失败的。

这里使用的getImage()，在上个实验中已经实现了，就不再赘述了。

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          actions: [
            Container(
              child: FlatButton(
                padding: EdgeInsets.all(0.0),
                child: getImage(),
                onPressed: (){
                  print("I Pressed the Iconbutton");
                },
              ),
            )
          ],
        ),
        body: Text("Just a Simple test"),
      );
  }

返回目录

GestureDetector实现

发现不管如何使用Container都无法实现我们要求的范围，无奈，只好使用GestureDetector组件。

getImage()在第二个实验中已经实现了。

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          actions: [
              GestureDetector(
              onLongPress: () {
                print("I Pressed the Iconbutton");
              },
              child: getImage(),
            ),
          ],
        ),
        body: Text("Just a Simple test"),
      );
  }

返回目录

GestureDetector实现（改良）

从上面的截图可以看出来，没有很好的实现我们要的功能，实现也很简单，外部加一个Padding就好了。

getImage()在第二个实验中已经实现了。

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          actions: [
            Padding(
              padding: EdgeInsets.all(10.0),
              child: GestureDetector(
                onTap: () {
                  print("I Pressed the Iconbutton");
                },
                child: getImage(),
              ),
            ),
          ],
        ),
        body: Text("Just a Simple test"),
      );
   }

返回目录

最后说一句

小白创作，大佬勿喷。
欢迎留言交流！