Flutter边界半径方面

z8dt9xmd  于 2023-01-02  发布在  Flutter
关注(0)|答案(3)|浏览(155)

有人知道如何做软边界半径,类似这样:

有没有可能用Flutter,我不知道怎么做。

fbcarpbf

fbcarpbf1#

可以通过在Container中使用decorationborderRadius属性来实现此目的。
例如:

Column(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
     Container(
      height: 200,
      width: 200,
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.all(Radius.elliptical(20, 10)),
      ),
    ),
    Container(
      height: 200,
      width: 200,
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.all(Radius.circular(20)),
      ),
    ),
  ],
),

会产生这样的结果

另一方面,如果您希望边框具有不同的颜色,可以尝试以下操作:在Container:中的decoration属性的border属性中设置颜色

Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        Container(
          height: 200,
          width: 200,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(20)),
            border: Border.all(
              color: Colors.red,
            ),
          ),
          child: Center(
            child: Text('Content...'),
          ),
        ),
      ],
    ),
),

其结果是

pgpifvop

pgpifvop2#

Container(
            height: 75,
            width: 75,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(50),
              color: Colors.white,
              boxShadow: [
                BoxShadow(
                  color: Colors.grey,
                  blurRadius: 1,
                  offset: Offset(
                    1,
                    1,
                  ), // Shadow position
                ),
                BoxShadow(
                  color: Colors.grey,
                  blurRadius: 1,
                  offset: Offset(
                    -1,
                    -1,
                  ), // Shadow position
                ),
                BoxShadow(
                  color: Colors.grey,
                  blurRadius: 1,
                  offset: Offset(
                    -1,
                    1,
                  ), // Shadow position
                ),
                BoxShadow(
                  color: Colors.grey,
                  blurRadius: 1,
                  offset: Offset(
                    1,
                    -1,
                  ), // Shadow position
                ),
              ],
            ),
            padding: EdgeInsets.all(3),
            child: CircleAvatar(
              radius: 30,
              backgroundColor: hexToColor('#00BCD5'),
              child: Icon(Icons.ac_unit_outlined),
            ),
          ),
gr8qqesn

gr8qqesn3#

可以使用ClipRect。

ClipRRect(
    // Change border radius and type(.zero, .roundrect, or absolute values) to get your desired effect
    borderRadius: BorderRadius.circular(8.0),
    child: Container(color: Colors.grey),
)

相关问题