Flutter：向图像添加浮动操作按钮

Posted 2023-02-23

【中文标题】Flutter：向图像添加浮动操作按钮

【英文标题】：Flutter: add a floating action button to an image

【发布时间】：2019-03-06 02:36:13

【问题描述】：

我正在尝试向图像添加浮动操作按钮。该按钮将用于更改所选图像。我希望按钮浮动在图像的右下角。到目前为止，我所能做的就是在图像正下方添加浮动操作按钮。感谢您的帮助！

@override
Widget build(BuildContext context) 

  // Create the view scaffold. Use a list view so things scroll.
  return new Scaffold(
    appBar: new AppBar(
      title: new Text("My Title"),
    ),
    body: new ListView(
      children: [
        new Container(
          padding: EdgeInsets.zero,
          child: new Image.asset(
            "assets/images/background_image.png",
            fit: BoxFit.fitWidth,
          ),
        ),
        new FloatingActionButton(
          child: const Icon(Icons.camera_alt),
          backgroundColor: Colors.green.shade800,
          onPressed: () ,
        ),
        new Divider(),
        new ListTile(
          title: new Text('Email'),
          leading: const Icon(Icons.email),
          onTap: () ,
        ),
        new Divider(),
      ],
    ),
  );

【参考方案1】：

您可以使用Stack 和Positioned 小部件，您可以在此处阅读这些小部件：

堆栈： https://docs.flutter.io/flutter/widgets/Stack-class.html

定位： https://docs.flutter.io/flutter/widgets/Positioned-class.html

        return new Scaffold(
              appBar: new AppBar(
                title: new Text("My Title"),
              ),
              body: new ListView(
                children: [
                  Stack(
                    children: <Widget>[
                      new Container(
                          padding: EdgeInsets.zero,
                          child: new Image.asset(
                        "assets/images/background_image.png",
                        fit: BoxFit.fitWidth,
                      )),
                      Positioned(
                        right: 0.0,
                        bottom: 0.0,
                        child: new FloatingActionButton(
                          child: const Icon(Icons.camera_alt),
                          backgroundColor: Colors.green.shade800,
                          onPressed: () ,
                        ),
                      ),
                    ],
                  ),
                  new Divider(),
                  new ListTile(
                    title: new Text('Email'),
                    leading: const Icon(Icons.email),
                    onTap: () ,
                  ),
                  new Divider(),
                ],
              ),
            );

【讨论】：

这正是我所需要的。谢谢！