有人知道如何做软边界半径,类似这样:
有没有可能用Flutter,我不知道怎么做。
fbcarpbf1#
可以通过在Container中使用decoration的borderRadius属性来实现此目的。例如:
Container
decoration
borderRadius
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属性中设置颜色
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...'), ), ), ], ), ),
其结果是
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), ), ),
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), )
3条答案
按热度按时间fbcarpbf1#
可以通过在
Container
中使用decoration
的borderRadius
属性来实现此目的。例如:
会产生这样的结果
另一方面,如果您希望边框具有不同的颜色,可以尝试以下操作:在
Container
:中的decoration
属性的border
属性中设置颜色其结果是
pgpifvop2#
gr8qqesn3#
可以使用ClipRect。