Flutter Container图像显示为全高,我可以设置图像的高度吗?

时间:2020-05-22 01:57:24

标签: flutter

我需要在背景中设置图像的高度,在整个容器中显示它,我需要固定高度。

enter image description here

如您在该图像中看到的,背景图像覆盖了整个屏幕,另一个容器在图像上。我需要减小此图片的高度/

这是我的代码

class _PlaceDetailsState extends State<PlaceDetails> {
  @override
  Widget build(BuildContext context) {
    double statusBarHeight = MediaQuery.of(context).padding.top;
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;
    setState(() {
      print(height);
    });
    return Scaffold(
      body: Container(
          padding: EdgeInsets.only(top: statusBarHeight * 0.8),
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage(
                  'assets/images/place2.jpg', ),
              fit: BoxFit.fill,
            ),
          ),
          child: SingleChildScrollView(
            child: Column(
              children: <Widget>[
                SizedBox(height: height * 0.4,),
                ClipRRect(
                  borderRadius: BorderRadius.only(topRight: Radius.circular(30), topLeft: Radius.circular(30)),
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.white,

                    ),
                    child: Column(
                      children: <Widget>[
                        SizedBox(height: height * 0.03,),
                        Container(height: height * 0.01, width: width * 0.1,color: Colors.pink,),
                        SizedBox(height: height * 0.031,),
                        Container(
                          width: width,
                          margin: EdgeInsets.only(left: 10),
                          child: Text('PLACES', textAlign: TextAlign.left, style: TextStyle(fontSize: 30),),
                        ),
                        SizedBox(height: height * 0.02,),
                        Places(),
                        Places(),
                        Places(),
                        Places(),
                        Places(),


                      ],
                    ),
                  ),
                )
              ],
            ),
          )),
    );
  }
}

class Places extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double statusBarHeight = MediaQuery.of(context).padding.top;
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;
    return Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(30),
      ),
      elevation: 10.0,
      child: Container(
          width: width * 0.9,
          child: Row(children: <Widget>[
            ClipRRect(
              borderRadius: BorderRadius.all(Radius.circular(20)),
              child: Container(
                width: width * 0.25,
                child: Image.asset('assets/images/place.jpg'), ),
            ),
            Container(
              width: MediaQuery.of(context).size.width * 0.6,
              child: Column(
                children: <Widget>[
                  Container(
                    padding: EdgeInsets.only(left: 10),
                    child: Align(
                        alignment: Alignment.centerLeft,
                        child: Text(
                          'Heading',
                          textAlign: TextAlign.left,
                        )),
                  ),
                  Container(
                      padding: EdgeInsets.only(left: 10, top: 4),
                      child: Text(
                          'sit amet facilisis magna etiam tempor orci eu lobortis elementum'))
                ],
              ),
            )
          ])),
    );
  }
}

如果更改高度,我们将无法更改主容器的高度,那么整个屏幕高度都会发生变化

0 个答案:

没有答案