Блог

Главная - Вопросы по программированию - Как нарисовать закругленный прямоугольник с границами только сверху?

Как нарисовать закругленный прямоугольник с границами только сверху?

#flutter #dart

#flutter #dart

Вопрос:

Существует несколько способов нарисовать закругленный прямоугольник. Я хочу нарисовать закругленный прямоугольник с содержимым внутри. Однако закругленной должна быть только верхняя часть прямоугольника.

Я пытался

 Container(
        decoration:
            BoxDecoration(border: Border(top: BorderSide(color: Colors.red))),
        child: Column(
          children: [Text("hello")],
        ));

но я получаю красную строку с надписью «привет» внизу. Не имеет смысла.

Ответ №1:

С помощью borderRadius.vertical вы можете выбрать верхние или нижние углы.

 decoration: BoxDecoration(
 borderRadius: BorderRadius.vertical(
   top: Radius.circular(20),
 ),
),

И с помощью borderRadius.только вы можете выбрать любой угол.

 decoration: BoxDecoration(
 borderRadius: BorderRadius.only(
   topLeft: Radius.circular(20),
   topRight: Radius.circular(20),
 ),
),

Комментарии:

1. Это лучший ответ.

Ответ №2:

Это небольшая хитрость

 Container(
          height: 100,
          width: 150,
          decoration: BoxDecoration(
            color: Colors.red,
            borderRadius: BorderRadius.all(
              const Radius.circular(15.0),
            ),
          ),
          child: Container(
              margin: const EdgeInsetsDirectional.only(top: 2),
              decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.only(
                  topLeft: const Radius.circular(13.0),
                  topRight: const Radius.circular(13.0),
                ),
              ),
              child: Column(
                children: [
                  Text("hello"),
                ],
              ) 
              ),
        )

Ответ №3:

Попробуй это

 Container(
    decoration: ShapeDecoration(
      color: Colors.yourColor,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(16.0),
          topRight: Radius.circular(16.0),
        ),
      ),
    ),
  ),

Комментарии:

1. Cannot provide both a color and a decoration To provide both, use "decoration: BoxDecoration(color: color)". 'package:flutter/src/widgets/container.dart': Failed assertion: line 285 pos 15: 'color == null || decoration == null'

2. @Paprika решение описано в самой ошибке, прочитайте внимательно

3. @Paprika удалите цвет из вашего контейнера и добавьте его в оформление. Я обновил свой код, см..

Метки: