如何控制容器中的图像大小?

时间:2020-09-06 21:31:41

标签: flutter flutter-layout flutter-animation

在Card内部有一列,其中包含2个Flexible小部件(flex属性为3,1),每个小部件都包含一个Container小部件 这是代码:

@override
  Widget build(BuildContext context) {
    return Container(
          color: Colors.blue,
          child: Card(
            child: Column(
              children: [
                Flexible(
                  flex: 3,
                  child: Container(
                    color: Colors.red,
                  )
                  ),

                Flexible(
                  flex: 1,
                    child: Container(
                      color: Colors.amber,
                      child: Center(child: Text('Request')
                      ),
                    )
                )
              ],
            ),
          ),
    );


此代码为我提供了以下屏幕:enter image description here

现在我要放置图像以覆盖所有红色区域,

 @override
  Widget build(BuildContext context) {
    return Container(
          color: Colors.blue,
          child: Card(
            child: Column(
              children: [
                Flexible(
                  flex: 3,
                   child: Container(
                    color: Colors.red,
                    child: Image.network(
                      'https://placeimg.com/640/480/any', fit: BoxFit.cover,)
                  )
                  ),

                Flexible(
                  flex: 1,
                    child: Container(
                      color: Colors.amber,
                      child: Center(child: Text('Request')
                      ),
                    )
                )
              ],
            ),
          ),
    );
  }

但是当在容器中添加图像时会发生这种情况 enter image description here

我尝试更改适合度:BoxFit.cover,但是什么也没发生

如何在不更改容器尺寸的情况下使图像覆盖容器(带有红色区域)?

添加行和其他列

 Widget build(BuildContext context) {
    return Container(
          color: Colors.blue,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Card(
                child: Column(
                  children: [
                    Flexible(
                      flex: 3,
                      child: Container(
                        // use the decoration property
                        decoration: BoxDecoration(
                          color: Colors.red,
                          // image here
                          image: DecorationImage(
                            image: NetworkImage(
                              'https://placeimg.com/640/480/any',
                            ),
                            fit: BoxFit.cover,
                          ),
                        ),
                      ),
                    ),

                    Flexible(
                      flex: 1,
                        child: Container(
                          color: Colors.amber,
                          child: Center(
                              child: RichText(
                                text: TextSpan(
                                  text: 'Request a service',
                                  style: TextStyle(
                                    fontSize: 20,
                                    color: Colors.black
                                  )
                                ),
                          )
                          ),
                        )
                    )
                  ],
                ),
              ),
              Card(
                child: Column(
                  children: [
                    Flexible(
                      flex: 3,
                      child: Container(
                        // use the decoration property
                        decoration: BoxDecoration(
                          color: Colors.red,
                          // image here
                          image: DecorationImage(
                            image: NetworkImage(
                              'https://placeimg.com/640/480/any',
                            ),
                            fit: BoxFit.cover,
                          ),
                        ),
                      ),
                    ),

                    Flexible(
                        flex: 1,
                        child: Container(
                          color: Colors.amber,
                          child: Center(
                              child: RichText(
                                text: TextSpan(
                                    text: 'Request a service',
                                    style: TextStyle(
                                        fontSize: 20,
                                        color: Colors.black
                                    )
                                ),
                              )
                          ),
                        )
                    )
                  ],
                ),
              ),
            ],
          ),
    );
  }

enter image description here

1 个答案:

答案 0 :(得分:2)

使用decoration的{​​{1}}属性为其提供一个Container

Image

结果:

result

编辑:“为什么我在 Flexible( flex: 3, child: Container( // use the decoration property decoration: BoxDecoration( color: Colors.red, // image here image: DecorationImage( image: NetworkImage( 'https://placeimg.com/640/480/any', ), fit: BoxFit.cover, ), ), ), ), 中使用它时为什么我的图像没有显示?”?:

您需要通过将RowCard包装在Width小部件中来SizedBox

以您的代码为例添加了一个演示:

Container

注意:建议根据设备屏幕的宽度为class Help extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Container( color: Colors.blue, child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ SizedBox( width: 150, // give width here child: Card( child: Column( children: [ Expanded( flex: 3, child: Container( // use the decoration property decoration: BoxDecoration( color: Colors.red, // image here image: DecorationImage( image: NetworkImage( 'https://placeimg.com/640/480/any', ), fit: BoxFit.cover, ), ), ), ), Flexible( flex: 1, child: Container( color: Colors.amber, child: Center( child: RichText( text: TextSpan( text: 'Request a service', style: TextStyle( fontSize: 20, color: Colors.black)), )), )) ], ), ), ), SizedBox( width: 150, // give width here child: Card( child: Column( children: [ Expanded( flex: 3, child: Container( // use the decoration property decoration: BoxDecoration( color: Colors.red, // image here image: DecorationImage( image: NetworkImage( 'https://placeimg.com/640/480/any', ), fit: BoxFit.cover, ), ), ), ), Flexible( flex: 1, child: Container( color: Colors.amber, child: Center( child: RichText( text: TextSpan( text: 'Request a service', style: TextStyle( fontSize: 20, color: Colors.black)), )), )) ], ), ), ), ], ), ), ); } } 设置宽度。

结果:

result