Flutter: как сделать так, чтобы высота контейнера огибала его содержимое
Я делаю предупреждение и хочу, чтобы контейнер был обернут вокруг его содержимого. Не удалось задать левую границу закругленного контейнера, чтобы сделать другой контейнер, который будет соответствовать высоте родительского контейнера. Теперь, если я задаю высоту родительскому контейнеру, это не кажется хорошим подходом, поскольку текст внутри контейнера может меняться... Я хочу, чтобы контейнер автоматически определял высоту, необходимую для красивого внешнего вида, а виджеты внутри него не перекрываются или превышают
Container(
width: double.infinity,
height: 80.0,
padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.inversePrimary,
borderRadius: BorderRadius.all(Radius.circular(10.0)),
boxShadow: [
BoxShadow(
color: Theme.of(context).colorScheme.primary,
spreadRadius: 0,
blurRadius: 1,
offset: const Offset(0, 1)
), // no shadow color set, defaults to black
]
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
flex: 1,
child: Container(
width: 8,
padding: EdgeInsets.all(0.0),
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10.0),bottomLeft:Radius.circular(10.0) ),
color: buildMaterialColor(const Color(0xFF70AD47)),
),
),
),
Expanded(
flex: 40,
child: Container(
padding:EdgeInsets.all(8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children:[
Expanded(
flex: 1,
child: Text(
textAlign: TextAlign.end,
String.fromCharCode( CupertinoIcons.check_mark_circled.codePoint),
style: TextStyle(
inherit: false,
color: buildMaterialColor(const Color(0xFF70AD47)).shade400,
fontSize: 40.0,
fontFamily: CupertinoIcons.check_mark_circled.fontFamily,
package: CupertinoIcons.check_mark_circled.fontPackage,
),
),
),
Expanded(
flex:5,
child: Container(
padding: EdgeInsets.only(left:10.0,right: 0.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Success",
style: TextStyle(
inherit: false,
color: buildMaterialColor(const Color(0xFF70AD47)).shade400,
fontSize: 16.0,
),
),
Text(
"lorem ipsum de feacto de jure lorem ipsum de feacto de jure",
style: TextStyle(
overflow: TextOverflow.clip,
inherit: false,
color: Theme.of(context).colorScheme.onPrimaryContainer,
fontSize: 14.0,
),
),
],
)
),
),
]
),
),
),
Expanded(
flex: 5,
child: Container(
child: IconButton(
onPressed: (){},
icon: Icon(
Icons.close_rounded,
color: buildMaterialColor(const Color(0xFF70AD47)).shade400,
size: 16.0,
),
),
),
)
],
)
),
Laravel с Turbo JS
Turbo - это библиотека JavaScript для упрощения создания быстрых и высокоинтерактивных веб-приложений. Она работает с помощью техники под названием...
Типы ввода HTML: Лучшие практики и советы
HTML, или HyperText Markup Language , является стандартным языком разметки, используемым для создания веб-страниц. Типы ввода HTML - это различные...
Аутсорсинг разработки PHP для индивидуальных веб-решений
Услуги PHP-разработки могут быть экономически эффективным решением для компаний, которые ищут высококачественные услуги веб-разработки по доступным...
Понимание Python и переход к SQL
Перед нами лабораторная работа по BloodOath:
Слишком много useState? Давайте useReducer!
Современный фронтенд похож на старую добрую веб-разработку, но с одной загвоздкой: страница в браузере так же сложна, как и бэкенд.
Узнайте, как использовать теги <ul> и <li> для создания неупорядоченных списков в HTML
HTML предоставляет множество тегов для структурирования и организации содержимого веб-страницы. Одним из наиболее часто используемых тегов для...
1
0
70
4
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 4
Вы можете удалить свойство height и обернуть родительский виджет Container виджетом Expanded. Это должно выглядеть так: надеюсь, это поможет.
Expanded(
child: Container( width: double.infinity,
padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.inversePrimary,
borderRadius: BorderRadius.all(Radius.circular(10.0)),
boxShadow: [
BoxShadow(
color: Theme.of(context).colorScheme.primary,
spreadRadius: 0,
blurRadius: 1,
offset: const Offset(0, 1)
), // no shadow color set, defaults to black
]
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
flex: 1,
child: Container(
width: 8,
padding: EdgeInsets.all(0.0),
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10.0),bottomLeft:Radius.circular(10.0) ),
color: buildMaterialColor(const Color(0xFF70AD47)),
),
),
),
Expanded(
flex: 40,
child: Container(
padding:EdgeInsets.all(8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children:[
Expanded(
flex: 1,
child: Text(
textAlign: TextAlign.end,
String.fromCharCode( CupertinoIcons.check_mark_circled.codePoint),
style: TextStyle(
inherit: false,
color: buildMaterialColor(const Color(0xFF70AD47)).shade400,
fontSize: 40.0,
fontFamily: CupertinoIcons.check_mark_circled.fontFamily,
package: CupertinoIcons.check_mark_circled.fontPackage,
),
),
),
Expanded(
flex:5,
child: Container(
padding: EdgeInsets.only(left:10.0,right: 0.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Success",
style: TextStyle(
inherit: false,
color: buildMaterialColor(const Color(0xFF70AD47)).shade400,
fontSize: 16.0,
),
),
Text(
"lorem ipsum de feacto de jure lorem ipsum de feacto de jure",
style: TextStyle(
overflow: TextOverflow.clip,
inherit: false,
color: Theme.of(context).colorScheme.onPrimaryContainer,
fontSize: 14.0,
),
),
],
)
),
),
]
),
),
),
Expanded(
flex: 5,
child: Container(
child: IconButton(
onPressed: (){},
icon: Icon(
Icons.close_rounded,
color: buildMaterialColor(const Color(0xFF70AD47)).shade400,
size: 16.0,
),
),
),
)
],
)),
)
Думайте, что ваша сборка элемента похожа на гибкую. Используйте развернутое до доступных мест.
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
buildLeft(context),
Expanded(child: buildMiddle(context)),
/// take
buildRightCloseIcon(),
],
),
Тестовый виджет.
class FAs23 extends StatefulWidget {
const FAs23({super.key});
@override
State<FAs23> createState() => _FAs23State();
}
class _FAs23State extends State<FAs23> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
SizedBox(
height: 200,
),
Container(
width: double.infinity,
height: 80.0,
padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.inversePrimary,
borderRadius: BorderRadius.all(Radius.circular(10.0)),
boxShadow: [
BoxShadow(
color: Theme.of(context).colorScheme.primary,
spreadRadius: 0,
blurRadius: 1,
offset: const Offset(
0, 1)), // no shadow color set, defaults to black
]),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
buildLeft(context),
Expanded(child: buildMiddle(context)),
/// take
buildRightCloseIcon(),
],
),
),
],
),
),
);
}
Container buildRightCloseIcon() {
return Container(
child: IconButton(
onPressed: () {},
icon: Icon(
Icons.close_rounded,
color: const Color(0xFF70AD47),
size: 16.0,
),
),
);
}
Container buildMiddle(BuildContext context) {
return Container(
padding: EdgeInsets.all(8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
textAlign: TextAlign.end,
String.fromCharCode(CupertinoIcons.check_mark_circled.codePoint),
style: TextStyle(
inherit: false,
color: const Color(0xFF70AD47),
fontSize: 40.0,
fontFamily: CupertinoIcons.check_mark_circled.fontFamily,
package: CupertinoIcons.check_mark_circled.fontPackage,
),
),
Expanded(
child: Container(
padding: const EdgeInsets.only(left: 10.0, right: 0.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
"Success",
style: TextStyle(
inherit: false,
color: Color(0xFF70AD47),
fontSize: 16.0,
),
),
Text(
"lorem ipsum de feacto de jure lorem ipsum de feacto de jure",
style: TextStyle(
overflow: TextOverflow.clip,
inherit: false,
color:
Theme.of(context).colorScheme.onPrimaryContainer,
fontSize: 14.0,
),
),
],
)),
),
]),
);
}
Container buildLeft(BuildContext context) {
return Container(
width: 8,
// height: double.infinity,// will get parent height
padding: const EdgeInsets.all(0.0),
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0), bottomLeft: Radius.circular(10.0)),
color: Color(0xFF70AD47),
),
);
}
}
Пожалуйста, удалите MediaQuery.of(context).size.height
Expanded(
flex: 1,
child: Container(
width: 8,
padding: EdgeInsets.all(0.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10.0),bottomLeft:Radius.circular(10.0) ),
color: buildMaterialColor(const Color(0xFF70AD47)),
),
Остальные
Container(
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.inversePrimary,
borderRadius: const BorderRadius.all(Radius.circular(10.0)),
boxShadow: [
BoxShadow(
color: Theme.of(context).colorScheme.primary,
blurRadius: 1,
offset: const Offset(0, 1)),
]),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 8,
padding: const EdgeInsets.all(0.0),
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
bottomLeft: Radius.circular(10.0)),
color: Color(0xFF70AD47),
),
child: const SizedBox(height: 100),
),
Expanded(
child: Column(
children: const [
Text(
"Success",
style: TextStyle(
inherit: false,
color: Color(0xFF70AD47),
fontSize: 16.0,
),
),
Text(
"lorem ipsum de feacto de jure lorem ipsum de feacto de jure",
style: TextStyle(
overflow: TextOverflow.clip,
inherit: false,
fontSize: 14.0,
),
),
],
),
),
IconButton(
onPressed: () {},
icon: const Icon(
Icons.close_rounded,
color: Color(0xFF70AD47),
size: 16.0,
),
)
],
),
),
Это просто проблема с высотой
—
13.02.2023 12:13
Вы применяете высоту одного из ваших дочерних элементов строки
—
13.02.2023 12:13
Пожалуйста, удалите это
—
13.02.2023 12:13
Высота носителя занимает всю высоту экрана, поэтому у вас возникает эта проблема
—
13.02.2023 12:17
Боковая граница теперь не отображается
—
13.02.2023 12:25
Подожди, проверяй @hoorIqbal
—
13.02.2023 12:25
Остальное - это код, вы можете найти весь код там @hoorIqbal
—
13.02.2023 12:27
Также обновлен снимок экрана @hoorIqbal
—
13.02.2023 12:31
Проверить код остатка
—
13.02.2023 12:39
Вы пробовали это? @hoorIqbal
—
13.02.2023 13:38
Да, так как дочерний элемент имеет высоту 100, боковая граница выбирает эту часть и делает высоту контейнера одинаковой высоты..... если я удалю дочернюю ту же проблему
—
13.02.2023 17:21
Ответ принят как подходящий
Попробуй это
ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
child:Container(
width: double.infinity,
height: 80.0,
padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
decoration: BoxDecoration(
color: Colors.black,
border: Border(
left: BorderSide(
color: Theme.of(context).colorScheme.primary,
width: 10,
),
top: BorderSide.none,
right: BorderSide.none,
bottom: BorderSide.none,
),
boxShadow: [
BoxShadow(
color: Theme.of(context).colorScheme.primary,
spreadRadius: 0,
blurRadius: 1,
offset: const Offset(0, 1),
), // no shadow color set, defaults to black
],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
flex: 40,
child: Container(
padding: EdgeInsets.all(8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
CupertinoIcons.check_mark_circled,
color:
(const Color(0xFF70AD47)).withAlpha(400),
size: 40.0,
),
Expanded(
// flex: 5,
child: Container(
padding: EdgeInsets.only(
left: 10.0, right: 0.0),
child: Column(
mainAxisAlignment:
MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
"Success",
style: TextStyle(
inherit: false,
color: (const Color(0xFF70AD47))
.withAlpha(400),
fontSize: 16.0,
),
),
Expanded(
child: Text(
"lorem ipsum de feacto de jure lorem ipsum de feacto de jure lorem ipsum de feacto de jure lorem ipsum de feacto de jure lorem ipsum de feacto de jure lorem ipsum de feacto de jure",
style: TextStyle(
overflow: TextOverflow.clip,
inherit: false,
color: Theme.of(context)
.colorScheme
.onPrimaryContainer,
fontSize: 14.0,
),
),
),
],
)),
),
],
),
),
),
Expanded(
flex: 5,
child: Container(
child: IconButton(
onPressed: () {},
icon: Icon(
Icons.close_rounded,
color: (const Color(0xFF70AD47)).withAlpha(200),
size: 16.0,
),
),
),
)
],
)),
)
И вы получаете такие результаты, как я утроил текст и проверил результат, также я удалил контейнер для границы и создал левую границу со свойством границы контейнера:
Обновлено: попробуйте этот код в этом контейнере будет расти в соответствии с текстом:
ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
child: Container(
width: double.infinity,
// height: 80.0,
padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
decoration: BoxDecoration(
color: Colors.black,
border: Border(
left: BorderSide(
color: Theme.of(context).colorScheme.primary,
width: 10,
),
top: BorderSide.none,
right: BorderSide.none,
bottom: BorderSide.none,
),
boxShadow: [
BoxShadow(
color: Theme.of(context).colorScheme.primary,
spreadRadius: 0,
blurRadius: 1,
offset: const Offset(0, 1),
), // no shadow color set, defaults to black
],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
flex: 40,
child: Container(
padding: EdgeInsets.all(8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
CupertinoIcons.check_mark_circled,
color:
(const Color(0xFF70AD47)).withAlpha(400),
size: 40.0,
),
Expanded(
// flex: 5,
child: Container(
padding:
EdgeInsets.only(left: 10.0, right: 0.0),
child: Column(
mainAxisAlignment:
MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
"Success",
style: TextStyle(
inherit: false,
color: (const Color(0xFF70AD47))
.withAlpha(400),
fontSize: 16.0,
),
),
Text(
"lorem ipsum de feacto de jure lorem ipsum de feacto de jure lorem ipsum de feacto de jure lorem ipsum de feacto de jure lorem ipsum de feacto de jure lorem ipsum de feacto de jure lorem ipsum de feacto de jure lorem ipsum de feacto de jure lorem ipsum de feacto de jure lorem ipsum de feacto de jure lorem ipsum de feacto de jure lorem ipsum de feacto de jure",
style: TextStyle(
overflow: TextOverflow.fade,
inherit: false,
color: Theme.of(context)
.colorScheme
.onPrimaryContainer,
fontSize: 14.0,
),
),
],
),
),
),
],
),
),
),
Expanded(
flex: 5,
child: Container(
child: IconButton(
onPressed: () {},
icon: Icon(
Icons.close_rounded,
color: (const Color(0xFF70AD47)).withAlpha(200),
size: 16.0,
),
),
),
)
],
)),
)
Это результат:
У этого есть одна проблема .... подробный текст обрезается, и из-за этого «переполнения: TextOverflow.clip» это не отображается.
—
13.02.2023 12:45
Вы можете изменить TextOverflow. значения и проверьте, какое из них соответствует вашим требованиям, будут отображаться эллипсы ... для дополнительного текста и постепенное исчезновение лишнего текста.
—
13.02.2023 12:54
Проверьте ответ, я обновил его, и теперь контейнер будет расти вместе с текстом
—
13.02.2023 12:59
Да Теперь проблема решена
—
13.02.2023 13:11
Другие вопросы по теме
Вызвать суперметод суперкласса из дочернего класса
Тип "String" не является подтипом типа "Movie"
Как установить несколько цветов для текстовых тем?
Ошибка камеры карты Google: необработанное исключение: MissingPluginException (реализация для метода camera # animate не найдена
Функция проверки содержимого (Flutter)
Средство форматирования ввода не допускает значение, когда оно должно
List.add не добавляет элемент в логический список во флаттере
Возникла проблема с «Ошибка: «MenuController» импортирован»
Как объединить два массива во Flutter?
Flutter - Кто-нибудь может сказать, почему я получаю эти ошибки?
Похожие вопросы
Вызвать суперметод суперкласса из дочернего класса
Тип "String" не является подтипом типа "Movie"
Как установить несколько цветов для текстовых тем?
Ошибка камеры карты Google: необработанное исключение: MissingPluginException (реализация для метода camera # animate не найдена
Функция проверки содержимого (Flutter)
Как наблюдаемый класс (obs) с использованием Getx во флаттере
Flutter: как выделить текст в WebView (WebViewWidget) и что-то с ним сделать в функции?
Как можно использовать SnackBars в Scaffold в виджете без сохранения состояния?
Flutter. Параметр «email» не может иметь значение «null» из-за его типа, но неявное значение по умолчанию — «null».
Контейнер Flutter не меняется при нажатии
Дочерние элементы RenderFlex имеют ненулевое значение гибкости, но входящие ограничения по высоте не ограничены.