如何对齐脚手架上的背景图像？答案

【问题标题】：How do I align a background Image on my Scaffold?如何对齐脚手架上的背景图像？
【发布时间】：2020-06-09 18:40:26
【问题描述】：

我有一个页面，我想在我的脚手架上的轮子周围设置这个金色边框。这是我的代码：

 Widget spinningWheel(context) {
    double realWidth = MediaQuery.of(context).size.width;
    return Container(
      decoration: BoxDecoration(color: Colors.transparent),
      //color: Theme.of(context).primaryColor.withAlpha(180),
      child: Align(
        alignment: Alignment.topCenter,
        child: Spinwheel(
          shouldDrawCenterPiece: true,
          wheelPaint: Paint()..color = Colors.red,
          sectorDividerPaint: Paint()..color = Colors.black,
          centerPiecePaint: Paint()..color = Colors.black,
          items: items,
          size: realWidth * 0.9,
          onChanged: (val) {
            if (this.mounted) setState(() {});
          },
          select: select,
          shouldDrawDividers: true,
          wheelOrientation: pi / 8,
          autoPlay: false,
          hideOthers: false,
          shouldDrawBorder: false,
          shouldHighlight: false,
        ),
      ),
    );
  }

这是我正在使用的依赖项：https://pub.dev/packages/flutter_spinwheel

这就是我的轮子的样子

这是我要插入的边框：

【问题讨论】：

尝试使用堆栈小部件
下面的答案能解决你的问题吗？

标签： user-interface flutter dart

【解决方案1】：

尝试 Stack Widget 并相应地设置对齐这是演示，并确保您使用的是透明背景图像：

 @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Align(
            alignment: Alignment.topCenter,
            child: new Image.asset(
              'assets/yellow_circle.jpg',
              width: size.width,
              height: size.height/2,
              fit: BoxFit.fill,
            ),
          ),
          Align(
            alignment: Alignment.topCenter,
            child: new Image.asset(
              'assets/red_circle.png',
              width: size.width,
              height: size.height/2,
              fit: BoxFit.fill,
            ),
          ),
        ],
      ),
    );
  }
}

【讨论】：