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

Question

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

@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(),
      ],
    ),
  );
}

Answer 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(),
                ],
              ),
            );