Question

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

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

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

尝试这种方式：

chdir

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

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

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

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

5 个答案: