Блог

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

Как у меня есть два разных места для текста (вверху и внизу) в Flutter?

#flutter #dart

Вопрос:

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

Пример того, чего я пытаюсь достичь, находится здесь: дизайн карты

Прямо сейчас у меня есть пользовательский компонент карты, как показано ниже:

   Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPress,
      child: Container(
        child: cardChild,
        padding: EdgeInsets.fromLTRB(10, 8, 10, 8),
        margin: EdgeInsets.fromLTRB(10, 8, 10, 8),
        decoration: BoxDecoration(
          color: colour,
          borderRadius: BorderRadius.circular(10.0),
        ),
      ),
    );
  }

И тогда я использую этот компонент карты вот так:

   return CustomCard(
    colour: Color(0xFF303030),
    cardChild: Column(
      // mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(
          "Top Text",
          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 28)
        ),
        Text(
          "Bottom Text",
          style: TextStyle(fontSize: 18)
        )
      ],
    ),
  );

Я думаю, что я мог бы сделать, это создать контейнер для текста в левом нижнем углу, это приблизило меня к результату, но я не думаю, что делал это совершенно правильно.

Ответ №1:

Вы должны добавить Expanded(child: SizedBox()) виджет между обоими Text виджетами

 return CustomCard(
  colour: Color(0xFF303030),
  cardChild: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text("Top Text", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 28)),
      Expanded(child: SizedBox()),
      Text("Bottom Text", style: TextStyle(fontSize: 18))
    ],
  ),
);

Если вы хотите, вы можете добавить Padding обертку виджета Column , чтобы добавить внутреннее дополнение к вашему Card виджету.

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

1. Позволит ли это переместить выравнивание нижнего текста вправо? Это работает с перемещением текста вниз (спасибо!), Хотя просто для справки на будущее, как я мог бы переместить нижний текст тоже вправо, если бы захотел?

2. вы можете обернуть свой нижний текст в Контрайнер или Выровнять виджет и изменить его выравнивание в правом нижнем углу, если хотите… или любое выравнивание.

Ответ №2:

Все, что вам нужно сделать, это добавить mainAxisAlignment: MainAxisAlignment.spaceBetween в Column :

https://www.dartpad.dev/fb357b9308db33ce11074a9c5f7aa41e?null_safety=true

Метки: