如何在Flutter中在图像上叠加图标？

Question

我有一个如下所示的交错GridView。在网格的每个项目中，我都试图将图标放置在其中心，并覆盖图像的顶部。我尝试使用堆栈，但是图标似乎已移位。

这是我的代码：

 class AccountViewController: UIViewController {

 @IBOutlet weak var button: UIButton!


public var accountType:String = ""
override func viewDidLoad() {
    super.viewDidLoad()
    accountType = button.currentTitle!
   
  }

，结果如下所示：

这就是我一直在努力实现的目标：

Answer 1

您使用了正确的小部件Stack，但是可能您错过了一些东西。
我用Container用Stack用fit: StackFit.expand,包裹了Positioned以填充所有空间，而Scaffold( body: Align( alignment: Alignment.topCenter, child: StaggeredGridView.countBuilder( crossAxisCount: 4, itemCount: 8, itemBuilder: (BuildContext context, int index) { return Stack( fit: StackFit.expand, children: [ Container( child: ClipRRect( borderRadius: BorderRadius.all(Radius.circular(6)), child: Image.network( 'https://images.unsplash.com/photo-1534361960057-19889db9621e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60', fit: BoxFit.fitHeight, ), ), ), Positioned(child: Icon(Icons.play_arrow)) ], ); }, staggeredTileBuilder: (int index) => new StaggeredTile.count(2, index.isEven ? 2 : 3), mainAxisSpacing: 4.0, crossAxisSpacing: 4.0, ), ), ) 将在中间 因此，这里有完整的代码，它可能会有所帮助：

<select class="form-control" name="role" id="role" formControlName="role">
     <option value="" disabled selected>Select the role</option>
     <option *ngFor="let role of roleList" value="{{ role }}">{{role}}</option>
</select>

Answer 2

使用Stack窗口小部件的对齐属性为center。

child: Stack(
  alignment: Alignment.center,
  children: <Widget>[
     //Image
     //Icon
  ],
),