从中心拉伸图像

Question

我正在从中心拉伸图像。 图像应从中心拉伸，图像高度应与内容大小相同。我从 GlobalKey 获取内容高度。 对于前。图像高度为 700px，加载内容（listview）后高度为 1000px。 图像高度应拉伸 300px。它应该像 9patch 图像一样工作。 这可以借助 centerSlice 属性来完成。 下面附上代码和图片。

  double heightTOadd = 0.0;
  GlobalKey key = GlobalKey();
  @override
  void initState() {
    super.initState();
    Future.delayed(Duration(milliseconds: 1000), () async {
      setState(() {
        heightTOadd = key.currentContext!.size!.height;
      });
    });
  }
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Stack(
        children: [
          Container(
            width: MediaQuery.of(context).size.width,
            height: heightTOadd,
            decoration: BoxDecoration(
                color: Colors.purple,
                image: DecorationImage(
                  alignment : Alignment.topCenter,
                  fit: BoxFit.fill,
                  // centerSlice: Rect.fromLTRB(MediaQuery.of(context).size.width/ 2, heightTOadd / 2,MediaQuery.of(context).size.width/ 2, heightTOadd / 2),
                  image: AssetImage('images/homeBG.png'),
                )),
          ),
          listView(),
        ],
      ),
    );
  }
  Widget listView() {
    return ListView(
      key: key,
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
      children: [cell(), cell(), cell(), cell(), cell(), cell(), cell(), cell(), cell(), cell(), cell(), cell(), ],
    );
  }
  Widget cell() {
    return Container(
        padding: const EdgeInsets.all(20),
        child:Container(height: 150, color: Colors.red.withOpacity(0.0),)
    );
  }

Answer 1

我不确定我是否理解你的问题，但我认为这个问题已经得到解答这里 有几种可能的解决方案，但建议之一是使用 FittedBox。