flutter - 绘制局部圆角矩形边界

Question

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

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);
}

las，当我运行它时，它死于以下断言:

flutter: The following assertion was thrown during paint():
flutter: A borderRadius can only be given for uniform borders.
flutter: 'package:flutter/src/painting/box_border.dart':
flutter: Failed assertion: line 510 pos 12: 'borderRadius == null'

如果我从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'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}