简体   繁体   English

Flutter:如何在底部、左侧和右侧同时设置边框半径和边框颜色

[英]Flutter: How To Have Both Border Radius And Border Color On Bottom, Left And Right

I am having an issue where I can have border color on the bottom left, right and bottom OR border radius on the bottom left and right corners but I can't get both at the same time, how could I do this?我遇到一个问题,我可以在左下角、右下角和底部有边框颜色,或者在左下角和右下角有边框半径,但我不能同时获得这两个,我该怎么做?

 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)),
    ),

  ),

Wrap the Container with the ClipRRect() or RoundedRectangleBorder() Widget and add the borderRadius: from there.ClipRRect()或 RoundedRectangleBorder( RoundedRectangleBorder() Widget 包装Container并从那里添加borderRadius:

ClipRRect example: ClipRRect 示例:

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

Full Code of ClipRRect example: 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.
    );
Container(
      decoration: BoxDecoration(
        color: Colors.blue, //background color 
        border: Border.all(
            color: Colors.black // border color
        ),
        borderRadius: borderRadius: BorderRadius.only(
         bottomLeft: Radius.circular(25.0),
         bottomRight: Radius.circular(25.0)),
      ),
  )

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM