Question

这是我的圈子代码：

class Light extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return UnconstrainedBox(
      child: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.height,
        decoration: BoxDecoration(
            shape: BoxShape.circle,
            gradient: RadialGradient(
                center: Alignment.center,
                colors: [Colors.yellow, Colors.black])),
      ),
    );
  }
}

现在，圆的半径为screenWidth。我可以通过将Light包裹在UnconstrainedBox中来制作正确的尺寸，但是会收到溢出警告。

有什么提示吗？

Answer 1

这是使用几乎相同的代码来完成此操作的一种非常骇人听闻的方法。由于它使用比例因子，因此不会与圆的边缘完全对齐。但是我想到也许您对此并不在意。如果您喜欢它，请接受它作为答案。如果对齐方式有问题，我会撤回。

class Light extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipRect(
      child: Transform.scale(
        scale: 3,
        child: Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.height,
          decoration: BoxDecoration(
              shape: BoxShape.circle,
              gradient: RadialGradient(
                  center: Alignment.center,
                  colors: [Colors.yellow, Colors.black])),
        ),
      ),
    );
  }
}

Answer 2

您可以使用ListView实现该结果。

class _MyAppState extends State<MyApp> {
  ScrollController _scrollController;

  @override
  void initState() {
    _scrollController = ScrollController();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final sizeWidth = MediaQuery.of(context).size.width;
    final sizeheight = MediaQuery.of(context).size.height;
    return ListView(
      scrollDirection: Axis.horizontal,
      physics: NeverScrollableScrollPhysics(),
      controller: ScrollController(initialScrollOffset: sizeWidth / 2.5),
      children: <Widget>[
        UnconstrainedBox(
          child: Container(
            height: sizeheight,
            width: sizeheight,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              gradient: RadialGradient(
                center: Alignment.center,
                colors: [Colors.yellow, Colors.black],
              ),
            ),
          ),
        )
      ],
    );
  }
}

如何在具有屏幕高度半径且侧面被修剪的颤振中制作圆？

2 个答案: