#flutter #layout #alignment #row
#flutter #макет #выравнивание #строка
Вопрос:
Макет определяется как foollows:
Flexible(child: new Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
child: Row(
children: <Widget>[
Padding(
padding: EdgeInsets.only(right: 8.0),
child: Text(categoryIcon,
style: TextStyle(
color: Colors.lightBlue,
fontFamily: 'Fontawesome',
fontWeight: FontWeight.normal))),
Flexible(
child: Text(categoryName,
maxLines: 3,
style: TextStyle(
color: Colors.lightBlue,
fontWeight: FontWeight.normal))),
Text("#33088",
style: TextStyle(
color: Colors.black26,
fontWeight: FontWeight.normal))
]),
padding: EdgeInsets.only(
bottom: 3.0, left: 8.0, top: 10.0, right: 5.0),
),
Padding(
child: Text(title,
maxLines: 3,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontWeight: FontWeight.normal, fontSize: 16)),
padding: EdgeInsets.only(
bottom: 3.0, left: 8.0, top: 10.0, right: 5.0),
),
Padding(
child: new Text(address,
style: TextStyle(fontStyle: FontStyle.normal)),
padding: EdgeInsets.only(
bottom: 10.0, left: 8.0, top: 10.0, right: 5.0),
),
Visibility(
child: Padding(
child: new Text("⬤ " statusName,
style: TextStyle(
fontStyle: FontStyle.normal,
color: HexColor(statusColor))),
padding:
EdgeInsets.only(bottom: 10.0, left: 8.0, top: 0.0),
),
visible: type == ResponseMessageType.MESSAGE_TYPE_EVENT ||
type == ResponseMessageType.MESSAGE_TYPE_MY_EVENT,
)
],
),
));
Я получаю результат:
Поэтому всегда, когда виджет второй строки (метка) переносится в текст, метка выравнивается по правому краю, если нет, то метка вообще не выравнивается. Если я попытаюсь:
Row(
children: <Widget>[
Padding(
padding: EdgeInsets.only(right: 8.0),
child: Text(categoryIcon,
style: TextStyle(
color: Colors.lightBlue,
fontFamily: 'Fontawesome',
fontWeight: FontWeight.normal))),
Flexible(
child: Text(categoryName,
maxLines: 3,
style: TextStyle(
color: Colors.lightBlue,
fontWeight: FontWeight.normal))),
Spacer(),
Text("#33088",
style: TextStyle(
color: Colors.black26,
fontWeight: FontWeight.normal))
])
Я неправильно переношу строку метки и по-прежнему не выравниваю метку по правому краю, когда текст метки не переносится:
Мне нужно, чтобы мой список выглядел так, как на первом рисунке, но метка «# 33088» всегда должна быть выровнена по правому краю, независимо от того, завернута метка категории или нет. Метку категории необходимо обернуть, когда не останется свободного места, а также меткой «# 33088».
Как это сделать правильно?
[править / править код]
Частично основываясь на приведенных ниже ответах, похоже, это сработало:
Row(
children: <Widget>[
Padding(
padding: EdgeInsets.only(right: 8.0),
child: Text(
categoryIcon,
style: TextStyle(color: Colors.lightBlue, fontFamily: 'Fontawesome', fontWeight: FontWeight.normal))),
Flexible(
child: Row(
children: [
Flexible(
child: Text(categoryName,
maxLines: 3,
style: TextStyle(color: Colors.lightBlue, fontWeight: FontWeight.normal)),
),
],
)),
Visibility(
visible: type == ResponseMessageType.MESSAGE_TYPE_EVENT,
child: Expanded(
flex: 0,
child: Text("#" id, style: TextStyle(color: Colors.black26, fontWeight: FontWeight.normal)),
),
)
])
(извините, теперь включена некоторая логика). Но я не доволен этим, особенно, я не понимаю, зачем мне это нужно:
Flexible(
child: Row(
children: [
Flexible(
child: Text(categoryName,
maxLines: 3,
style: TextStyle(color: Colors.lightBlue, fontWeight: FontWeight.normal)),
),
],
)),
Если я поставлю Flexible вместо него один:
Flexible(
child: Text(categoryName,
maxLines: 3,
style: TextStyle(color: Colors.lightBlue, fontWeight: FontWeight.normal)),
)
Снова метка #id не выровнена. С строкой, содержащей один гибкий, снова обернутый гибким, кажется, работает.
Ответ №1:
Проверьте атрибуты тени и высоты границы, надеюсь, вы найдете свой ответ
Комментарии:
1. Любые подробности, что вы имеете в виду? Вы неправильно поняли мой вопрос, я не имею в виду высоту карты, я имею в виду метки внутри нее
2. Хорошо, теперь я понимаю ваш вопрос, ваш гибкий виджет занимает место как внутри своего дочернего элемента, поэтому ваш ярлык занимает оставшееся место, поэтому всегда меняется, если вы хотите, чтобы ваш ярлык всегда оставался в правом углу, вы должны поместить свой ярлык внутри виджета с размером и статически изменять их размер, это будет работать, но не идеальное решение 🙁
Ответ №2:
Flexible(child: new Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
child: Row(
children: <Widget>[
Expanded( // here
Попробуйте использовать расширенный
Ответ №3:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Flexible(
flex: 1,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(
Icons.flash_on,
),
Flexible(
child: Text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod",
maxLines: 3,
style: TextStyle(
color: Colors.lightBlue,
fontWeight: FontWeight.normal,
),
),
),
],
),
),
Text(
"#33088",
style: TextStyle(
color: Colors.black26,
fontWeight: FontWeight.normal,
),
)
],
)
Ответ №4:
В строке оберните первые три виджета с помощью expanded (каждый виджет оберните с помощью expanded), а затем четвертый виджет автоматически выровняется по правому краю
и ваш код будет выглядеть так
Flexible(child: new Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Padding(
child: Row(
children: <Widget>[
Padding(
padding: EdgeInsets.only(right: 8.0),
child: Text(categoryIcon,
style: TextStyle(
color: Colors.lightBlue,
fontFamily: 'Fontawesome',
fontWeight: FontWeight.normal))),
Flexible(
child: Text(categoryName,
maxLines: 3,
style: TextStyle(
color: Colors.lightBlue,
fontWeight: FontWeight.normal))),
Text("#33088",
style: TextStyle(
color: Colors.black26,
fontWeight: FontWeight.normal))
]),
padding: EdgeInsets.only(
bottom: 3.0, left: 8.0, top: 10.0, right: 5.0),
),
),
Expanded(
child: Padding(
child: Text(title,
maxLines: 3,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontWeight: FontWeight.normal, fontSize: 16)),
padding: EdgeInsets.only(
bottom: 3.0, left: 8.0, top: 10.0, right: 5.0),
),
),
Expanded(
child: Padding(
child: new Text(address,
style: TextStyle(fontStyle: FontStyle.normal)),
padding: EdgeInsets.only(
bottom: 10.0, left: 8.0, top: 10.0, right: 5.0),
),
),
Visibility(
child: Padding(
child: new Text("⬤ " statusName,
style: TextStyle(
fontStyle: FontStyle.normal,
color: HexColor(statusColor))),
padding:
EdgeInsets.only(bottom: 10.0, left: 8.0, top: 0.0),
),
visible: type == ResponseMessageType.MESSAGE_TYPE_EVENT ||
type == ResponseMessageType.MESSAGE_TYPE_MY_EVENT,
)
],
),
)),