如何在 Flutter 中反转半径答案

【问题标题】：How to invert a radius in Flutter如何在 Flutter 中反转半径
【发布时间】：2020-08-08 13:11:54
【问题描述】：

我正在尝试在文本小部件中添加半径边框，但我不知道如何“反转”边框半径以使其不是白色：

我希望蓝色部分和绿色部分与带有半径的角保持在一起。

Container( 
  padding: const EdgeInsets.fromLTRB(_hPad, 10.0, _hPad, _hPad), 
  child: Text(_body), 
  width: appWidth / 2, 
  height: middleSectionHeight, 
  decoration: BoxDecoration( 
    borderRadius: BorderRadius.only( 
      bottomRight: Radius.circular(70.0), 
      topLeft: Radius.circular(70.0), 
    ), 
    color: Color(0xff99AAAB), 
  ), 
),

【问题讨论】：

Container( padding: const EdgeInsets.fromLTRB(_hPad, 10.0, _hPad, _hPad), child: Text(_body), width: appWidth / 2, height: middleSectionHeight, decoration: BoxDecoration(borderRadius: BorderRadius .only(bottomRight: Radius.circular(70.0), topLeft: Radius.circular(70.0), ), color: Color(0xff99AAAB), ), ),
请添加您想要实现的图片
请通过编辑为您的问题添加任何说明。另外，我不明白“与半径保持在一起”是什么意思。

标签： flutter dart

【解决方案1】：

您可以将 BorderRadius 作为参数传递：

示例类：

class ExampleContainer extends StatelessWidget {

  final String text;
  final BorderRadius borderRadius;
  final Color color;

  static const double _hPad = 10.0;

  const ExampleContainer(
      {@required this.text, @required this.borderRadius, @required this.color,});

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      padding: const EdgeInsets.fromLTRB(_hPad, 10.0, _hPad, _hPad),
      child: Text(text),
      width: appWidth / 2,    //change to the width you want
      height: middleSectionHeight,    //change to the height you want
      decoration: BoxDecoration(
        borderRadius: borderRadius,    //passing here the borderRadius
        color: color,
      ),
    );
  }
}

利用：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ExampleContainer(
          borderRadius: BorderRadius.vertical(top: Radius.circular(70.0)),
          color: Colors.blueGrey,
          text: 'title',
        ),
        ExampleContainer(
          borderRadius: BorderRadius.vertical(bottom: Radius.circular(70.0)),
          color: Color(0xff99AAAB),
          text: 'something2',
        ),
      ],
    ),
  );
}

【讨论】：