0

Как в flutter сделать что бы текст переносился с одной строки на другую.

Я создалCard в ней Row, в нём Column, а в нём Text. В Card есть Image и если текст или изображение слишком длинные, то изображение уходит за пределы Card.

Указать размеры не получиться, так как пользователь сам вводит дату, название, и изображение.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: bgColor,
      body: ListView.builder(
        itemCount: 10,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            margin: EdgeInsets.only(left: 20, right: 20, top: 5, bottom: 5),
            height: 150,
            child: Card(
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
              elevation: 10,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      Container(
                        margin: EdgeInsets.only(left: 15, top: 5),
                        child:
                          Text('Это дата', style: LabelTextStyle,)),
                      Container(
                        margin: EdgeInsets.only(left: 15, top: 0),
                        child:
                      Text('Это название праздника. Оно слишком длинное', style: textStyle,)),
                    ],
                  ),
                  Container(
                    padding: EdgeInsets.all(10),
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(10),
                      child:
                        Image.network('image url')
                    )
                  )
                ],
              ),
            ) 
          );
        },
      ) 
    );
  }

Вот что выходит

3 ответа 3

2

Есть несколько способов реализовать перенос текста в Flutter. Самым удобным я считаю оборачивание в виджет Flexible (он имеет эффект только внутри виджетов Row и Column) - это обеспечит автоматические переносы:

Row(
  children: [
    /* .... */
    Flexible(
      child: Text("Какой-то очень длинный текст"),
    ),
    /* .... */
  ],
),


Ну а для контролируемого (неавтоматического) переноса, достаточно просто разбить текст на несколько виджетов, типа

Column(
  children: [
    /* .... */
    Text("Кусочек какого-то длинного текста"),
    Text("Еще один кусочек длинного текста"),
    Text("И еще один"),
    /* .... */
  ],
),

Разбитие динамического строкового значения на подстроки заданной длины (чтобы рендерить их перебором) можно выполнить любым удобным способом. Например (первое что мне пришло в голову):

const text = 'Какой-то очень длинный текст';
const n = 64;  // желаемая максимальная длина подстроки
List chunks = [
  for (int i = n; i < text.length + n; i += n)
    text.substring(i - n, min(text.length, i))
];
3
  • Спасибо! Я в Row поместил flexible, а в него column с текстом и image. Все работает.
    – Ruslan
    15 июл 2021 в 11:34
  • Третий раз помогаешь! Спасибо
    – Ruslan
    15 июл 2021 в 11:40
  • @Ruslan, пожалуйста! В применении Flutter я сам начинающий, но могу посоветовать искать ответы в оф.документации (как самого фреймворка, так и языка Dart) - она реально хороша, и среди своих вопросов я там только на один не нашел ответа... да и то, потому что плохо поискал, как впоследствии выяснилось :)
    – yar85
    15 июл 2021 в 11:44
0
Flexible(
  fit: FlexFit.loose,
  child: Text(
              'Какой-то очень длинный текст',
              overflow: TextOverflow.ellipsis,
              maxLines: 2,
              ),
  )
1
  • добро пожаловать на Stack Overflow на русском! пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 8 авг 2022 в 6:52
-1

Со Flutter'ом не работал но почти всегда помогает \n (перенос на новую строчку)

Это название праздника.\n Оно слишком длинное

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.