Блог

Главная - Вопросы по программированию - Флаттер: позиционирование изображений

Флаттер: позиционирование изображений

#flutter

#флаттер

Вопрос:

Это экран, который я хочу создать:

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

Как вы можете видеть, у меня есть две фотографии в центре, как я могу переместить это фоновое розовое изображение в верхний левый угол?

Вот ссылка на мой полный код https://pastebin.com/CwgsPx4a

 children: <Widget> [
                SizedBox(
                  height: 250,
                
                  child: Image.asset(
                    "assets/logo.png",
                    
                  fit: BoxFit.contain,
                  )
                ),
                SizedBox(
                  
                  
                
                  child: Image.asset(
                    "assets/top.png",
                    
                    
                    
                  fit: BoxFit.contain,
                  )
                ),

Ответ №1:

Код:

     Column(
      children: [
        // fake top image
        Align(
          alignment: Alignment.topLeft,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.red,
          ),
        ),
        const SizedBox(height: 50),
        // fake logo
        Container(
          width: 100,
          height: 100,
          color: Colors.blue,
        ),
        // fake other widgets
        const SizedBox(height: 16),
        Container(
          width: 200,
          height: 30,
          color: Colors.green,
        ),
        const SizedBox(height: 16),
        Container(
          width: 200,
          height: 30,
          color: Colors.green,
        ),
      ],
    );

Результат:

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

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

1. Я не очень хорошо это объяснил.. Как вы можете видеть на скриншоте, я хочу, чтобы все было по-прежнему в центре, только чтобы 1/4 круга была в правом верхнем углу, я попытался перекодировать его, но не смог. Спасибо

2. Извините, я не могу понять вашу идею: (

3. Можете ли вы нарисовать черновик? Может быть, я смогу помочь.

4. Я думаю, теперь вы поймете, как я хочу выглядеть одинаково.. Поскольку я не могу опубликовать скриншот напрямую, я оставлю вам ссылку на фотографию: imgur.com/a/mvwVypc Кроме того, это весь мой код этого: pastebin.com/BiLXSkTY

5. Проверьте мой отредактированный ответ.

Метки: