Flutter Web 条子：customscrollview

Question

我正在制作一个颤动的网络。 我想在 CustomScrollView 中调整水平图像的大小。

例如：在产品详细信息页面上，我想将 600x400 宽度的顶部图像放置在布局的中心。

无论图像大小如何，水平扩展至 900 倍或更多都是一个问题。

布局：

代码：

class ServiceProductDetailPage extends StatelessWidget {
  final String productId;
  final ServiceProductModel product;
  ServiceProductDetailPage({required this.product, required this.productId});    
  @override
  Widget build(BuildContext context) {    
    return Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: Colors.transparent,
      body: CustomScrollView(
        slivers: [      
          SliverAppBar(
            pinned: true,
            expandedHeight: 50,
            title: Text('Title'),
            stretch: true,
            backgroundColor: Colors.black,
          ),      
          SliverToBoxAdapter(child: _Body(context, _product)),        
        ],
      ),
    );
  }
}

Widget _Body(BuildContext context, ServiceProductModel product) {
  return Card(
    child: ConstrainedBox(
      constraints: BoxConstraints.tight(Size(900,400)
      ),
      child: LoadingImage(url: product.image),
    ),
  );
}

class LoadingImage extends StatelessWidget {
  const LoadingImage({
    Key? key,
    required this.url,
  }) : super(key: key);

  final String url;
  @override
  Widget build(BuildContext context) {
    return Image.network(
      url,
      fit: BoxFit.cover,
      width: double.infinity,
      height: double.infinity,
      errorBuilder: (BuildContext c, Object err, StackTrace? stack) {
        return const Center(child: Text('error'));},
      frameBuilder: (BuildContext c, Widget image, int? frame, bool sync){
        if (!sync && frame == null) {
          return const Center(child: CircularProgressIndicator());
        }
        return image;
      },
    );
  }
}

Answer 1

您正在寻找的是UnconstrainedBox。根据文档，UnconstrainedBox 使其自身占据其父级的全部宽度，但它允许其 child 具有 child 决定的任何宽度。

所以，你可以这样使用它。

Widget _Body(BuildContext context, ServiceProductModel product) {
  return Card(
    child: UnconstrainedBox(
      child: Container(
        color: Colors.deepOrange,
        width: 900,
        height: 400,
        child: LoadingImage(url: product.image),
      ),
    ),
  );
}

接下来，你给了你一些属性Image.network，这使它扩展。

所以去掉下面的

fit: BoxFit.cover,
width: double.infinity,
height: double.infinity,

然后添加这个

fit: BoxFit.contain,

我给你的900 宽度Container 一个color 以查看它保持在900，尽管窗口大于900。