在颤动中仅显示图像的顶部部分答案

【问题标题】：show only some top portion of image in flutter在颤动中仅显示图像的顶部部分
【发布时间】：2020-12-21 12:17:59
【问题描述】：

在我的应用程序中，我想在屏幕的某些部分显示图像，点击阅读后，图像尺寸需要减小并仅显示图像的顶部

这是正常情况（图1）

当用户点击阅读更多时，我只想显示图像的顶部（图 2）

这是我的代码

Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(top:4.0),
      child: Column(
        children: <Widget>[
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Stack(
                  children: <Widget>[
                    Image.asset(       //image
                        "images/background.png",
                        height: MediaQuery.of(context).size.height*0.33,
                        width: MediaQuery.of(context).size.width,
                        fit: BoxFit.fill,
                      ),
                    Align(            // for topleft home icon
                      alignment: Alignment.topLeft,
                      child: Container(
                        width: 40, height: 40,
                        margin: EdgeInsets.all(15.0),
                        child: IconButton(
                          icon: new SvgPicture.asset("images/done_icon.svg",height: 30,width: 30,),
                          onPressed: () {},
                        ),
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          color: Colors.black12
                        ),
                      ),
                    ),
                ]
                ),

我想在点击阅读更多按钮后设计为 pic 2，只是告诉我需要在图像中进行更改，我将在点击事件中添加阅读更多文本

【问题讨论】：

标签： android ios image flutter

【解决方案1】：

您可以这样做。

class _MyWidgetState extends State<MyWidget> {
  double bannerHeight = 100;
  
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          width: double.infinity,
          child: Image.network(
            'https://images.pexels.com/photos/235986/pexels-photo-235986.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
            height: bannerHeight,
            alignment: Alignment.topCenter, 
            fit: BoxFit.fitWidth,
          ),
        ),
        const SizedBox(height: 30),
        FlatButton(
          child: Text('Read More'),
          onPressed: () {
            setState((){
              if(bannerHeight == 100){
                bannerHeight = 200;
              }
              else{
                bannerHeight = 100;
              }
            });
          },
        ),
      ],
    );
  }
}

在 dartpad 上查看 - https://dartpad.dev/558fc0badbbc444d418b76fc01aa45cd

【讨论】：