user-interface - 如何对齐脚手架上的背景图像？

Question

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

 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-interfaceflutterdart

Answer 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,
            ),
          ),
        ],
      ),
    );
  }
}