Android 容器/扁平按钮外部的飞溅流-颤振
我试着让飞溅物与容器的形状相匹配,容器的子容器是扁平按钮 按下时,飞溅物当前填充不同的形状,如下所示: 我的小部件代码如下:Android 容器/扁平按钮外部的飞溅流-颤振,android,ios,flutter,dart,mobile-development,Android,Ios,Flutter,Dart,Mobile Development,我试着让飞溅物与容器的形状相匹配,容器的子容器是扁平按钮 按下时,飞溅物当前填充不同的形状,如下所示: 我的小部件代码如下: import 'package:flutter/material.dart'; class RoundedButton extends StatelessWidget { const RoundedButton( {this.buttonColor, this.buttonTitle, @required this.onPressed}); final Col
import 'package:flutter/material.dart';
class RoundedButton extends StatelessWidget {
const RoundedButton( {this.buttonColor, this.buttonTitle, @required this.onPressed});
final Color buttonColor;
final String buttonTitle;
final Function onPressed;
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.symmetric(vertical: 16.0),
height: 42.0,
width: 200.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
color: buttonColor,
),
child: FlatButton(
onPressed: onPressed,
child: Text(
buttonTitle,
style: TextStyle(
color: Colors.white
),
),
),
);
}
}
您可以使用
ClipRRect
小部件以圆角剪裁基础小部件,通过使用borderRadius
属性并传递与父小部件相同的radius
,即使用ClipRRect
包装FlatButton
,以实现所需效果。工作代码示例如下:
body: Container(
margin: EdgeInsets.symmetric(vertical: 16.0),
height: 42.0,
width: 200.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
color: Colors.red,
),
child: ClipRRect(
borderRadius: BorderRadius.circular(30),
child: FlatButton(
onPressed: () {
print('pressed');
},
child: Text(
'Send',
style: TextStyle(
color: Colors.white
),
),
),
)
),
希望这能回答你的问题