绘制局部圆角矩形边界

Question

我希望能够在子窗口小部件周围绘制局部的圆角矩形边框：仅左侧，顶部和右侧；仅左侧，底部和右侧；等等。此功能非常接近我想要做的事情：

python

阿拉，当我运行它时，它死于以下断言：

Widget roundRectBorderTop(Widget child, Color color, double cornerRadius,
 [double borderWidth = 1.0])
{
    final side = BorderSide(color:color, width:borderWidth);
    final bord = Border(left:side, top:side, right:side);
    final radi = BorderRadius.circular(cornerRadius);
    final data = BoxDecoration(border:bord, borderRadius:radi);
    return DecoratedBox(child:child, decoration:data);
}

如果我从BoxDecoration对象中删除borderRadius：参数，则代码“有效”，但是它绘制的是我想要的直角而不是圆角。

有人知道如何解决此问题吗？

Answer 1

您可以简化BorderRadius.only来修饰Container；

Container(
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(20.0),
      topRight: Radius.circular(20.0),
    )
  ),
  child: ...
)

下面的屏幕截图的完整工作代码；

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Rounded Corners Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                decoration: BoxDecoration(
                  color: Colors.red,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(20.0),
                    topRight: Radius.circular(20.0),
                  ),
                ),
                padding: EdgeInsets.all(20.0),
                child: Text('Rounded Corners'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}