具有圆形边框但顶部边框与其他边的宽度不同的容器答案

【问题标题】：Container with rounded border but top border has different width than other sides具有圆形边框但顶部边框与其他边的宽度不同的容器
【发布时间】：2021-05-09 19:34:37
【问题描述】：

我正在尝试创建一个具有圆形边框但顶部边框比其他边框宽的容器以适应某些文本（可能使用堆栈）。

类似这样的：

我怎么还没有找到实现这一目标的方法。我试过这个：

return Container(
  decoration: BoxDecoration(
    border: Border(
      left: BorderSide(color: MyColors.backgroundColor1(context), width: 5, style: BorderStyle.solid),
      right: BorderSide(color: MyColors.backgroundColor1(context), width: 5, style: BorderStyle.solid),
      bottom: BorderSide(color: MyColors.backgroundColor1(context), width: 5, style: BorderStyle.solid),
      top: BorderSide(color: MyColors.backgroundColor1(context), width: 25, style: BorderStyle.solid),
    ),
  ),
  child: ...
);

但是这样我不能添加任何边框半径。

知道如何在 Flutter 中实现这一点吗？

【问题讨论】：

标签： flutter

【解决方案1】：

这是一个最小的可重复样本：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          decoration: BoxDecoration(
              borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(10), topRight: Radius.circular(10))),
          clipBehavior: Clip.antiAlias,
          child: Container(
            decoration: BoxDecoration(
                border: Border(
              top: BorderSide(color: Colors.black, width: 20),
              left: BorderSide(color: Colors.black, width: 2),
              bottom: BorderSide(color: Colors.black, width: 2),
              right: BorderSide(color: Colors.black, width: 2),
            )),
          ),
        ),
      ),
    );
  }
}

您也可以通过堆栈来实现这一点，尽管我怀疑这更接近您正在寻找的东西。关键是父容器中的剪辑。这将隐藏从该父容器溢出的所有内容。

编辑仔细查看您的照片后，我认为堆栈是最好的方法。这将很容易让您将文本放在该顶部边框中。这是一个示例小部件：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Material(
        child: Padding(
          padding: EdgeInsets.all(20),
          child: Stack(
            children: [
              Positioned.fill(
                  child: Container(
                decoration: BoxDecoration(
                    color: Colors.black,
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(10),
                        topRight: Radius.circular(10))),
              )),
              Positioned.fill(
                  child: Column(children: [
                Text("Sample Text",
                    style: TextStyle(color: Colors.white, fontSize: 18)),
                Expanded(
                    child: Padding(
                  padding: const EdgeInsets.all(2.0),
                  child: Container(
                    decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(10),
                            topRight: Radius.circular(10))),
                  ),
                ))
              ]))
            ],
          ),
        ),
      ),
    );
  }
}

基本上，您在填充有“边框”颜色的容器顶部堆叠一列。该列中的第一个元素是您要在“边框”中显示的文本。然后，您使用扩展的小部件和容器填充该列的其余部分，其颜色是您的背景颜色。该容器被包裹在填充中，它为您提供了小部件左侧、右侧和底部的边框宽度。

【讨论】：