android - 在 flutter 中仅显示图像的顶部部分

Question

在我的应用程序中，我想在屏幕的某些部分显示图像，单击“阅读更多”后，图像大小需要减小并仅显示图像的顶部部分

这是正常情况(图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
                        ),
                      ),
                    ),
                ]
                ),

我想在点击“阅读更多”按钮后设计为图 2，只需告诉我需要对图像进行更改，我将在 onclick 事件中放入“阅读更多”文本

Answer 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