Question

我遇到了一个问题，我可以在左下角、右下角和右下角设置边框颜色或在左下角和右下角设置边框半径，但我无法同时获得这两个颜色，我该怎么做？

 child: Container(

    padding: const EdgeInsets.all(10.0),
    alignment: Alignment.centerLeft,
    decoration: BoxDecoration(
      color: Color(0xff333634),

      border: Border(
        right: BorderSide(
          color: Colors.white,
          width: 1.0,
          style: BorderStyle.solid,
        ),
        left: BorderSide(
          color: Colors.white,
          width: 1.0,
          style: BorderStyle.solid,
        ),
        bottom: BorderSide(
          color: Colors.white,
          width: 1.0,
          style: BorderStyle.solid,
        ),
      ),
      borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(25.0),
          bottomRight: Radius.circular(25.0)),
    ),

  ),

Answer 1

用 Container 或 ClipRRect() 小部件包裹 RoundedRectangleBorder() 并从那里添加 borderRadius:。

ClipRRect 示例：

ClipRRect(
   borderRadius: BorderRadius.only(
   bottomLeft: Radius.circular(25.0),
   bottomRight: Radius.circular(25.0),
   child (...)
),

ClipRRect 示例的完整代码：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: [
            Text('Test'),
            ClipRRect(
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(25.0),
                bottomRight: Radius.circular(25.0),
              ),
              child: Container(
                padding: const EdgeInsets.all(10.0),
                alignment: Alignment.centerLeft,
                decoration: BoxDecoration(
                  color: Color(0xff333634),
                  border: Border(
                    right: BorderSide(
                      color: Colors.black,
                      width: 1.0,
                      style: BorderStyle.solid,
                    ),
                    left: BorderSide(
                      color: Colors.black,
                      width: 1.0,
                      style: BorderStyle.solid,
                    ),
                    bottom: BorderSide(
                      color: Colors.black,
                      width: 1.0,
                      style: BorderStyle.solid,
                    ),
                  ),
                  // borderRadius: BorderRadius.only(
                  //   bottomLeft: Radius.circular(25.0),
                  //   bottomRight: Radius.circular(25.0),
                  // ),
                ),
              ),
            ),
          ],
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );

Flutter：如何在底部，左侧和右侧同时具有边框半径和边框颜色

1 个答案: