Неправильная прокладка при упаковке контейнера в стопку [флаттер] - PullRequest
Новая
       31

Неправильная прокладка при упаковке контейнера в стопку [флаттер]

0 голосов
/ 01 февраля 2020

Я пытаюсь построить сетку изображений с заданной шириной и высотой, оборачивая их внутри Containers и используя fit: BoxFit.fill, чтобы иметь возможность установить внешнее и внутреннее заполнение для контейнеров (мне все равно, сохраняйте пропорции изображения, я не хочу иметь одинаковые отступы в каждом направлении, сохраняя фиксированную общую ширину и высоту для внешнего контейнера).

Теперь мне нужно наложить еще один виджет сверху каждого image (в верхнем левом углу, поэтому мне нужен внутренний контейнер, чтобы задать больше отступа для изображения), но когда я обертываю внутренний контейнер внутри Stack, заполнение внешнего контейнера увеличивается без контроля, как показано ниже:

enter image description here

Как я могу это исправить? Это мой код: 

import 'dart:io';
import 'dart:math';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  // See https://github.com/flutter/flutter/wiki/Desktop-shells#target-platform-override
  debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Row(
          children: [
            Container(
              width: 300,
              height: 200,
              child: Container(
                color: RandomColor().color,
                padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
                child: Container(
                  padding: EdgeInsets.fromLTRB(8, 8, 8, 8),
                  color: Colors.white,
                  child: Image.file(
                    File('C:/flutter/test/elephant.jpg'),
                    filterQuality: FilterQuality.high,
                    fit: BoxFit.fill,
                  ),
                ),
              ),
            ),
            Container(
              width: 300,
              height: 200,
              child: Container(
                color: RandomColor().color,
                padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
                child: Stack(
                  children: <Widget>[
                    Container(
                      padding: EdgeInsets.fromLTRB(8, 8, 8, 8),
                      color: Colors.white,
                      child: Image.file(
                        File('C:/flutter/test/elephant.jpg'),
                        filterQuality: FilterQuality.high,
                        fit: BoxFit.fill,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class RandomColor {
  Color color;

  RandomColor() {
    final random = Random();
    color = Color.fromRGBO(
        random.nextInt(256), random.nextInt(256), random.nextInt(256), 1);
  }
}

1 Ответ

1 голос
/ 01 февраля 2020

Внутри Stack виджета нам нужно сделать дополнительную подсказку о доступном пространстве. Я отделяю изображение от фона и завернул его в Container с constraints: BoxConstraints.expand()

import 'dart:io';
import 'dart:math';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  // See https://github.com/flutter/flutter/wiki/Desktop-shells#target-platform-override
  debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Row(
          children: [
            Container(
              width: 300,
              height: 200,
              child: Container(
                color: RandomColor().color,
                padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
                child: Container(
                  padding: EdgeInsets.fromLTRB(8, 8, 8, 8),
                  color: Colors.white,
                  child: Image.file(
                    File('C:/flutter/test/elephant.jpg'),
                    filterQuality: FilterQuality.high,
                    fit: BoxFit.fill,
                  ),
                ),
              ),
            ),
            Container(
              width: 300,
              height: 200,
              child: Container(
                color: RandomColor().color,
                padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
                child: Stack(
                  children: <Widget>[
                    Container(
                        padding: EdgeInsets.fromLTRB(8, 8, 8, 8),
                        color: Colors.white),
                    Padding(
                      padding: EdgeInsets.fromLTRB(8, 8, 8, 8),
                      child: Container(
                        constraints: BoxConstraints.expand(),
                        child: Image.file(
                          File('C:/flutter/test/elephant.jpg'),
                          filterQuality: FilterQuality.high,
                          fit: BoxFit.fill,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class RandomColor {
  Color color;

  RandomColor() {
    final random = Random();
    color = Color.fromRGBO(
        random.nextInt(256), random.nextInt(256), random.nextInt(256), 1);
  }
}
...