在列或行内时容器装饰不可见

Question

我是 flutter 的新手，我想在 AppBar 之后在顶部显示全宽的图像，我从堆栈溢出中获得了代码，如果我将容器放在 Scaffold 的主体中，它工作正常向我显示沿屏幕全宽的图像，但是当我将此代码放在列或行中时，它是不可见的。

我曾尝试在 Image() class 中显示图像，但它不会根据屏幕尺寸进行调整。我的意思是它没有响应。

import 'package:flutter/material.dart';
class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    MediaQueryData queryData;
    queryData = MediaQuery.of(context);
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        margin: EdgeInsets.all(20.0),
        child: Column(
          children: <Widget>[
            Row(
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                bannerImage(),
              ],
            )
          ],
        ),
      ),
    );
  }
}

class bannerImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new DecoratedBox(
        decoration: new BoxDecoration(
      image: new DecorationImage(
        image: new AssetImage("images/banner.png"),
        fit: BoxFit.fitWidth,
      ),
    ));
  }
}

我为 bannerImage 创建了单独的小部件。请建议我如何以全屏宽度显示我的图像，或者如何在不定义子项的情况下显示容器。谢谢

Answer 1

将DecoratedBox放入容器中并给出高度和宽度。

Answer 2

试试这个方法：

Container(
  decoration: BoxDecoration(
    color: const Color(0xff7c94b6),
    image: DecorationImage(
      image: ExactAssetImage('images/flowers.jpeg'),
      fit: BoxFit.fitWidth,
    ),
    border: Border.all(
      color: Colors.black,
      width: 8.0,
    ),
  ),
)

在您的 Column() 中使用此容器。

Answer 3

请解释您要在屏幕上显示的内容。当您添加一列时，它会垂直放置小部件，并且您已添加一行作为屏幕上的唯一元素。添加行时，您可能希望添加多个彼此水平放置的小部件。我建议您阅读这篇文章以正确理解布局 - https://medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e

Answer 4

首先你想要什么不清楚，而且你不能直接使用 queryData = MediaQuery.of(context); 你必须用 MaterialApp/WidgetsApp 小部件包装。

您必须设置 DecoratedBox 的子项才能显示图像，并且还需要换行 Expanded bannerImage。以下是您的一些代码。

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Streams Demo',
        theme: new ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: SecondRoute());
  }
}

class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        margin: EdgeInsets.all(20.0),
        child: Column(
          children: <Widget>[
            Row(
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Expanded(child: bannerImage()),
              ],
            )
          ],
        ),
      ),
    );
  }
}

class bannerImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new DecoratedBox(
        decoration: new BoxDecoration(
          image: new DecorationImage(
            image: new NetworkImage("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGTVf63Vm3XgOncMVSOy0-jSxdMT8KVJIc8WiWaevuWiPGe0Pm"),
            fit: BoxFit.fitWidth,
          ),
        ), child: Text('dddsfdff dfdfds dfgfdgfg fdgfdddsfdff dfdfds dfgfdgfg fdgfdddsfdff dfdfds dfgfdgfg fdgfdddsfdff dfdfds dfgfdgfg fdgfdddsfdff dfdfds dfgfdgfg fdgfdddsfdff dfdfds dfgfdgfg fdgfdddsfdff dfdfds dfgfdgfg fdgfdddsfdff dfdfds dfgfdgfg fdgf'),);
  }
}

Answer 5

使用指定了高度和宽度的容器小部件包装图像代码，有助于 Container() 和 Row() 显示您的图像。当行在其中的 Container() 子项中指定宽度（双精度）值时显示图像，而当指定高度（双精度）值时 Container() 显示。我只是将您的图像包装在 Row() 子项内的 Container() 小部件中，并指定了宽度和高度双精度值。随意调整值以适合实际图像的比例尺寸。希望本指南对您的项目有所帮助。

用以下代码替换 Row() 小部件：

    Row(
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            Container(
              height: 50.0,
              width: 100.0,
              decoration: BoxDecoration(
                image: bannerImage(),
                          ),
            ),
          ],
        ),

在列或行内时容器装饰不可见

Container decoration is not visible when inside a column or row

dart

flutter

flutter-layout