我希望我的 flutter 容器有类似 css 的 squirecircle ui

Question

我正在尝试像CSS一样在flutter上创建类似的方圆框，但没有选项可以更改顶部中心、底部中心、左中心和右中心边框。有没有解决方法可以这样做。

没有办法达到类似的结果。

import 'package:flutter/material.dart';

class frostedGlassBox extends StatelessWidget {
  const frostedGlassBox({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(22), color: Colors.amber),
    );
  }
}

Answer 1

如果你关心边框上的阴影，你可以使用这样的卡片：

 SizedBox(
                width: 100,
                height: 100,
                child: Card(
                  elevation: 10,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(22),
                  ),
                  color: Colors.amber,
                  child: Align(alignment: Alignment.center, child: Text("Square", style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),)),
                ),
              ),

Answer 2

如果要在其父窗口小部件中对齐整个

Container

，您可以用

Container

窗口小部件包裹

Align

，并指定

Align

窗口小部件内的对齐方式。具体方法如下：

Widget build(BuildContext context) {
     return Align(
       alignment: Alignment.center, // Aligns the Container in the center,
       child: Container(
         decoration: BoxDecoration(
         borderRadius: BorderRadius.circular(22),
         color: Colors.amber,
    ),
  }
}

在此更新的代码中，整个

Container

被

Align

小部件包裹，并且

Align

小部件内的对齐属性设置为

Alignment.center

，这会将

Container

与其父级的中心对齐小部件。您可以根据需要更改对齐值（例如，

Alignment.topLeft

、

Alignment.bottomRight

等）。