flutter - Flutter：在 Gridview 项目的底部对齐小部件

Question

如何在 gridview(GV) 项目的底部放置一个文本小部件。

我在 GV 项目中有一个图像，我想在图像的中心底部放置一个文本。但我做不到。

child : Stack(
          children: [
            // Image
            ClipRRect(
              borderRadius: BorderRadius.circular(20),
              child: Image.network(
                  "${DummyDataProvider().provideAdoptionList()[index].imageUrl}",
                  fit: BoxFit.fill),
            ),
            Text("This is bottom center text") <= how to align this text at bottom center of grid item
          ],
        ),
      ),

输出图像：

标签： flutterflutter-layout

Answer 1

我们试试看。你只需用Align

编辑：

      Stack(
            children: <Widget>[
              ClipRRect(
                borderRadius: BorderRadius.circular(20),
                child: Image.network(
                    "${DummyDataProvider().provideAdoptionList()[index].imageUrl}",
                    fit: BoxFit.fill),
              ),
              Positioned.fill(
                child: Align(
                  alignment: Alignment.bottomCenter,
                  child: Text(
                    'Text Message',
                    style: TextStyle(
                        color: Colors.lightGreenAccent,
                        fontWeight: FontWeight.bold,
                        fontSize: 22.0),
                  ),
                ),
              ),
            ],
          ),