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

问题描述 投票:0回答:2

enter image description here

我正在尝试像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),
    );
  }
}
flutter flutter-animation
2个回答
0
投票

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

 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),)),
                ),
              ),

0
投票

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

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
等)。

© www.soinside.com 2019 - 2024. All rights reserved.