Question

我正在尝试创建带有彩色底边框（一侧）的圆角容器。

我尝试对它们应用边框半径和borderSide颜色，但似乎出现错误，并且小部件无法渲染。

Container(
  margin: EdgeInsets.only(
    top:15.0
  ),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.all(
      Radius.circular(3)
    ),
    border: Border(
      bottom: BorderSide(color: Color.fromRGBO(0, 83, 79, 1),
      width: 3.0
      ))
  )...

我收到此错误消息：边界半径只能用于统一边界。This is what I'm trying to achieve

Answer 1

我认为您需要像这样使用ClipPath：

ClipPath(
    clipper: ShapeBorderClipper(
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(10))
        )
    ),
    child: Container(
        height: 70.0,
        width: 200.0,
        decoration: BoxDecoration(
            color: Colors.orange,
            border: Border(
                bottom: BorderSide(
                    color: Color.fromRGBO(0, 83, 79, 1),
                    width: 7.0
                )
            )
        )
    )
)

供参考的输出

see output here

Answer 2

在BoxDecoration中使用InkWell小部件

   A      B                  C          D       E       F      G       H    
1     Search Criteria:    Prod.D
2     Column:               4
3                                   Prod.A   Prod.B  Prod.C  Prod.D   Prod.E
4                      
5

Answer 3

使用 ClipPath 可以实现仅带边框半径的边框底部

Example on DartPad

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Padding(
          padding: EdgeInsets.all(18.0),
          child: ClipPath(
            clipper: ShapeBorderClipper(
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(Radius.circular(10)))),
            child: Container(
              height: 70.0,
              width: 200.0,
              decoration: BoxDecoration(
                color: Colors.blueAccent,
                border: Border(
                  bottom: BorderSide(
                      color: Color.fromRGBO(0, 83, 79, 1), width: 7.0),
                ),
              ),
              child: Center(
                    child: Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: new Text("Your Text",
                        style: TextStyle(fontSize: 30.0, color: Colors.black)),
                )),
            ),
          ),
        ),
      ),
    );
  }
}

如何在带有圆角的容器中添加彩色底边框？

3 个答案: