Оформление контейнера не видно внутри столбца или строки - PullRequest
Новая
       7

Оформление контейнера не видно внутри столбца или строки

0 голосов
/ 23 января 2019

Я новичок во флаттере и хочу показать изображение с полной шириной вверху после 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. Пожалуйста, предложите мне, как я показываю свое изображение на всю ширину экрана или как я могу показать контейнер, не определяя ребенка. Спасибо

Ответы [ 4 ]

0 голосов
/ 23 января 2019

Прежде всего, то, что вы хотите, неясно, и вы также не можете использовать 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'),);
  }
}

enter image description here

0 голосов
/ 23 января 2019

Попробуйте так: 

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,
    ),
  ),
)

Используйте этот контейнер в вашей колонке ().

0 голосов
/ 23 января 2019

Пожалуйста, объясните, что вы пытаетесь показать на экране.Когда вы добавляете столбец, он размещает виджеты вертикально, и вы добавляете строку как единственный элемент на экране.Когда вы добавляете строку, вы хотите добавить несколько виджетов, расположенных горизонтально друг к другу.Я рекомендую вам прочитать эту статью, чтобы правильно понять макеты - https://medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e

0 голосов
/ 23 января 2019

поместите DecoratedBox внутрь контейнера и укажите высоту и ширину.

...