flutter 如何设置抖动背景图像

hmae6n7t  于 2022-11-25  发布在  Flutter
关注(0)|答案(2)|浏览(184)

这是我的pubspec.yaml

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
uses-material-design: true

  # To add assets to your application, add an assets section, like this:
assets:
      - images/img_rectangle1.jpg

我已经建立了一个assets文件夹,并将其包含在my.png图片中;但是,我在使用小部件时遇到了困难。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text("Korean vocabulary related to traits"),
      centerTitle: false,
      backgroundColor:  const Color(0xFFEC74C8),
    ),
    body: Row(
      children: [
        Expanded(
            child: ListView.builder(
              itemCount: koreanNameList.length,
              itemBuilder: (context, index) {
                KoreanItem item = koreanNameList[index];
                return Draggable<KoreanItem>(
                    data: item,
                    dragAnchorStrategy: pointerDragAnchorStrategy,
                    feedback: KoreanNameCard(item: item),
                    child: KoreanNameCard(item: item));
              },
            )),
        Expanded(
            child: ListView.builder(
              itemCount: englishanswers.length,
              itemBuilder: (context, index) {
                return buildEnglishanswerColumn(englishanswers[index]);
              },
            )),
      ],
    ),
  );
}

那么,存放背景图片的容器应该放在哪里呢?
我试过用

AssetImage

但它没有显示在我的应用程序上。

1mrurvl1

1mrurvl11#

您需要在**pubspec.yaml指定******资产
Flutter使用pubspec.yaml文件(位于项目的根目录)来标识应用所需的资源。
以下是一个示例:

flutter:
  assets:
    - assets/images/background.png

要包含目录下的所有资源,请指定目录名称,并在结尾处使用/字符:

flutter:
  assets:
    - assets/
    - assets/images/

使用图像资源采样

Container(
  height: double.infinity,
  width: double.infinity,
  decoration: const BoxDecoration(
    image: DecorationImage(
      image: AssetImage("assets/splash/background.png"),
      fit: BoxFit.cover,
    ),
  ),
  child: const Center(
    child: Text(
      'Hello World!',
      style: TextStyle(color: Colors.white),
    ),
  ),
);
kxe2p93d

kxe2p93d2#

要将图像设置为背景,请使用此容器小部件作为Scaffold的主体。

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage("assets/images/image.jpg"),
            fit: BoxFit.cover,
      ),
  ),

  child: child
)

将image.jpg替换为您的图像名称。

相关问题