Блог

Главная - Вопросы по программированию - Как я могу перемещать текстовый виджет вокруг виджета изображения в Flutter

Как я могу перемещать текстовый виджет вокруг виджета изображения в Flutter

#dart #flutter

#dart #flutter

Вопрос:

введите описание изображения здесь

Как я могу добиться эффекта в flutter? Есть ли пример?

Ответ №1:

Вы могли бы использовать библиотеку drop_cap_text для получения такого поведения. Использование примерно такое:

 DropCapText(
    loremIpsumText,
    dropCap: DropCap(
    width: 100,
    height: 100,
    child: Image.network(
        'https://www.codemate.com/wp-content/uploads/2017/09/flutter-logo.png')
    ),
),

это

Или вы могли бы попробовать это сами, смешав и сопоставив SizedBox с RichText, как это было сделано в библиотеке.

Ответ №2:

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

  // Replace IconSVG with image of you.
 RichText(
          text: TextSpan(
          children: [
                      WidgetSpan(
                        child: IconSVG(
                             IconSVGPath.ic_suggest, 30, 30, null),
                          ),
                      TextSpan(text: " Tùy chọn các nội dung dưới đây để thay đổi giao diện CV phù hợp với bản thân bạn.",
                                  style: TextStyle(color: HexColor(
                                      StringColors.color_orange_primary),
                                      fontSize: 16,
                                      fontWeight: FontWeight.w400,
                                      fontFamily: NUNITO_SANS),
                                ),
            ],
            style: TextStyle(color: Colors.red,)
      ),

Результат будет выглядеть следующим образом:
flutter)

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

1. Есть ли простой способ выровнять текст в правом верхнем углу, если для изображений, которые занимают больше места, есть более одной строки текста?

2. Есть ли какой-либо способ, чтобы изображение занимало 2 строки текста?

Ответ №3:

Для flutter есть новая библиотека float_column, которая поддерживает это:

пример скриншота

С помощью кода, подобного этому:

 FloatColumn(
  children: [
    const Floatable(float: FCFloat.start, child: DropCap('“T', size: 3)),
    Floatable(
      float: FCFloat.end,
      clear: FCClear.start,
      clearMinSpacing: 12,
      maxWidthPercentage: 0.333,
      padding: EdgeInsetsDirectional.only(start: 8),
      child: Img(
        assetName: _name('jeremy-bishop-EwKXn5CapA4-unsplash.jpg'),
        title: 'Photo by Jeremy Bishop on Unsplash',
      ),
    ),
    Floatable(
      float: FCFloat.start,
      clear: FCClear.start,
      clearMinSpacing: 175,
      maxWidthPercentage: 0.25,
      padding: EdgeInsetsDirectional.only(end: 12),
      child: Img(
        assetName: _name('walt_whitman.jpg'),
        title: 'Walt Whitman',
      ),
    ),
    WrappableText(text: _text),
  ],
)

Вы можете увидеть полный пример кода здесь: basic_ltr.dart