在 Flutter 中的图像上添加一列按钮

Question

我有一个想要添加“故事”的 flutter 应用程序，但我无法这样做，因为我无法在图像上放置 3 个按钮。

这是我想要的样子...

这就是我目前能做的...

这是我的代码：-



child: GestureDetector(
          child: Center(
            child: Stack(
              alignment: Alignment.bottomRight,
              children: [
                Image.network(
                  widget.url,
                ),
                Container(
                  child: Column(children: [
                    Container(
                      color: Colors.grey,
                      child:
                          Column(children: [Icon(Icons.share), Text('مشاركة')]),
                    ),
                    Container(
                      color: Colors.grey,
                      child:
                          Column(children: [Icon(Icons.share), Text('مشاركة')]),
                    ),
                    Container(
                      color: Colors.grey,
                      child:
                          Column(children: [Icon(Icons.share), Text('مشاركة')]),
                    )
                  ]),
                )
              ],
            ),
          ),
          onTap: () => controller.next(),
        ),

如何实现这种效果？

我在用 Stack 小部件做些什么吗？

Answer 1

在 Stack 中使用 Positioned 可以解决您的问题，下面的代码可能适合您，您可以将容器放置在您想要的位置。

Widget build(BuildContext context) {
    var ScreenHeight = MediaQuery.of(context).size.height;
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Expenses App"),
          backgroundColor: Colors.pink[900],
          actions: [
            IconButton(
              icon: Icon(Icons.add),
              // onPressed: () => startAddNewTransaction(context),
            ),
          ],
        ),
        body: GestureDetector(
      child: Center(
      child: Stack(
        // alignment: Alignment.bottomRight,
        children: [
          Image.network(
            'https://picsum.photos/250?image=9',
          ),
          Positioned(
            top: ScreenHeight * 0.17,
            child: Container(
              child: Column(children: [
                Container(
                  color: Colors.grey,
                  child:
                  Column(children: [Icon(Icons.share), Text('مشاركة')]),
                ),
                SizedBox(height: ScreenHeight * 0.01),
                Container(
                  color: Colors.grey,
                  child:
                  Column(children: [Icon(Icons.share), Text('مشاركة')]),
                ),
                SizedBox(height: ScreenHeight * 0.01),
                Container(
                  color: Colors.grey,
                  child:
                  Column(children: [Icon(Icons.share), Text('مشاركة')]),
                )
              ]),
            ),
          )
        ],
      ),
    ),
    // onTap: () => controller.next(),
    ),

      ),
    );
  }

Answer 2

GestureDetector(
        child: Center(
          child: Stack(
            children: [
              Container(
                height: double.infinity,
                width: double.infinity,
                decoration: const BoxDecoration(
                  image: DecorationImage(
                    fit: BoxFit.cover,
                    image: NetworkImage(
                      "https://st2.depositphotos.com/3759967/5593/i/600/depositphotos_55936567-stock-photo-swirling-frosty-multi-colored-fractal.jpg",
                    ),
                  ),
                ),
              ),
              Positioned(
                bottom: MediaQuery.of(context).size.height * 0.1,
                child: Column(
                  children: [
                  Container(
                    margin: const EdgeInsets.only(bottom: 10.0),
                    color: Colors.grey,
                    child: Column(
                        children: const [Icon(Icons.share), Text('مشاركة')]),
                  ),
                  Container(
                    margin: const EdgeInsets.only(bottom: 10.0),
                    color: Colors.grey,
                    child: Column(
                        children: const [Icon(Icons.share), Text('مشاركة')]),
                  ),
                  Container(
                    margin: const EdgeInsets.only(bottom: 10.0),
                    color: Colors.grey,
                    child: Column(
                        children: const [Icon(Icons.share), Text('مشاركة')]),
                  )
                ]),
              ),
            ],
          ),
        ),
      ),

您可以这样做，将图像作为容器的背景，并将您的列放在定位的小部件中。 example

Answer 3

Column的默认mainAxisSize是最大值，如果你为所有Column设置MainAxisSize.min你将得到Stack的alignment.

child: Column(
  mainAxisSize: MainAxisSize.min,

至于你想要的对齐 UI，我更喜欢使用 Align 小部件来包装父 Column。

Align(
  alignment: Alignment(-1, .5), //play with it
  child: Container(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [

更多关于 Align。

在 Flutter 中的图像上添加一列按钮

Add a column of buttons over an image in Flutter

dart

flutter

flutter-layout