代码之家  ›  专栏  ›  技术社区  ›  nalyd88

颤振:向图像添加浮动动作按钮

  •  1
  • nalyd88  · 技术社区  · 7 年前

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

    @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 回复  |  直到 7 年前
        1
  •  7
  •   diegoveloper    7 年前

    你可以使用 Stack Positioned widget,您可以在这里阅读这些widget:

    堆栈: 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(),
                    ],
                  ),
                );