1

我正在尝试构建具有给定宽度和高度的图像网格，将它们包裹在内部Containers并使用fit: BoxFit.fill能够为容器设置外部和内部填充（我不在乎保持图像纵横比，我想） t 在每个方向上具有相同的填充，同时保持外部容器的固定总宽度和高度）。

现在我需要在每个图像的顶部覆盖另一个小部件（在左上角，所以我需要内部容器为图像设置更多填充），但是当我将内部容器包裹在 aStack中时，外部容器填充不受控制地增长，如下图：

在此处输入图像描述

我该如何解决？这是我的代码：

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);
  }
}
4

1 回答 1

1

在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);
  }
}
于 2020-02-01T19:48:06.813 回答