时间戳

首页 > 解决方案 > 扑。如何使容器比屏幕宽？

flutter - 扑。如何使容器比屏幕宽？

问题描述

我正在尝试为页面控制器创建视差背景。为此，我需要创建一个比屏幕更宽的背景图像。我把它放在这样的容器中：

@override
  Widget build(BuildContext context) {

    return Material(
      child: Stack(
        children: [
          Container(
              width: 4000,
              height:  250,
              decoration: BoxDecoration(
                  image: DecorationImage(
                      image: AssetImage('assets/images/pizza_bg.png'),
                      fit: BoxFit.cover,
                      repeat: ImageRepeat.noRepeat
                  )
              )
          ),
        ],
      ),
    );
  }

但问题是，无论我指定什么宽度，容器（当然还有图像）永远不会比屏幕宽。有可能吗？ps 我尝试使用 SizedBox 和 AspectRatio 小部件，它们都给出相同的结果

标签： flutterflutter-layout

解决方案

试试这个，作为一个选项

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: [
            SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Container(
                width: 4000,
                height: 250,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage('assets/images/pizza_bg.png'),
                    fit: BoxFit.cover,
                    repeat: ImageRepeat.noRepeat,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

您还可以禁用用户滚动并通过滚动控制器管理滚动位置

    SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      physics: const NeverScrollableScrollPhysics(),
      controller: controller, // your ScrollController
      child: Container(
        width: 4000,
        height: 250,
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('images/pizza_bg.png'),
            fit: BoxFit.cover,
            repeat: ImageRepeat.noRepeat,
          ),
        ),
      ),
    ),

推荐阅读