ios 如何添加一个彩色底部边界圆角容器在Flutter？

wtlkbnrh 于 2022-12-01 发布在 iOS

关注(0)|答案(4)|浏览(104)

我试图创建一个圆角容器与彩色底部边界（一侧）。
我试着对它们应用边框半径和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
      ))
  )...

我收到此错误消息：只能为统一边框指定border-radius。This is what I'm trying to achieve

ios

来源：https://stackoverflow.com/questions/58113983/how-to-add-a-colored-bottom-border-on-a-rounded-corner-container-in-flutter

4条答案

按热度按时间

jslywgbw1#

我认为您需要像这样使用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
                )
            )
        )
    )
)

参考输出：

赞(0）回复(0）举报 2022-12-01

mefy6pfw2#

将InkWell Widget与BoxDecoration搭配使用

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: Container(
            padding: EdgeInsets.only(
                top: 18.0,
            ),
            margin: EdgeInsets.only(top: 13.0, right: 8.0),
            decoration: BoxDecoration(
                color: Colors.white,
                shape: BoxShape.rectangle,
                borderRadius: BorderRadius.circular(16.0),
                boxShadow: <BoxShadow>[
                    BoxShadow(
                    color: Colors.black26,
                    blurRadius: 0.0,
                    offset: Offset(0.0, 0.0),
                    ),
                ]),
            child: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                SizedBox(
                    height: 20.0,
                ),
                Center(
                    child: Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: new Text("Your Text",
                        style: TextStyle(fontSize: 30.0, color: Colors.black)),
                )),
                SizedBox(height: 24.0),
                InkWell(
                    child: Container(
                    padding: EdgeInsets.only(top: 4.0, bottom: 4.0),
                    decoration: BoxDecoration(
                        color: Colors.green,
                        borderRadius: BorderRadius.only(
                            bottomLeft: Radius.circular(16.0),
                            bottomRight: Radius.circular(16.0)),
                    ),
                    ),
                    onTap: () {
                    Navigator.pop(context);
                    },
                )
                ],
            ),
            ),
        )),
        );
    }
    }

赞(0）回复(0）举报 2022-12-01

vq8itlhq3#

边框底部只能用border-radius只能用ClipPath实现

导入“ Package ：flutter/材料. 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)),
                )),
            ),
          ),
        ),
      ),
    );
  }
}

赞(0）回复(0）举报 2022-12-01

bfnvny8b4#

以防其他人需要添加不同颜色的圆框。
flutter issue from 2017创建了一个包，它实现了一种方法来实现这一点：https://pub.dev/packages/custom_rounded_rectangle_border
查看自述文件以了解使用说明。

赞(0）回复(0）举报 2022-12-01