dart 在 Flutter 中动态分配图像

brccelvz 于 2023-06-19 发布在 Flutter

关注(0)|答案(2)|浏览(114)

如何在Flutter中动态分配图像？例如：

final topContent = Stack(
      children: <Widget>[
        Container(
            padding: EdgeInsets.only(left: 10.0),
            height: MediaQuery.of(context).size.height * 0.5,
            decoration: new BoxDecoration(
              image: new DecorationImage(
                image: new AssetImage(lesson.imagePath),
                fit: BoxFit.cover,
              ),
            )),
        Container(
          height: MediaQuery.of(context).size.height * 0.5,
          padding: EdgeInsets.all(40.0),
          width: MediaQuery.of(context).size.width,
          decoration: BoxDecoration(color: Color.fromRGBO(58, 66, 86, .9)),
          child: SingleChildScrollView(
            controller: _scrollController,
            child: Center(
              child: topContentText,
            ),
          ),
        ),
        Positioned(
          left: 8.0,
          top: 60.0,
          child: InkWell(
            onTap: () {
              Navigator.pop(context);
            },
            child: Icon(Icons.arrow_back, color: Colors.white),
          ),
        )
      ],
    );

现在开始的图像lesson.imagePath是我想要动态更改的。我尝试使用setState()，但它给了我一个错误：
这里的表达式是void类型，不能使用

image: setState ((){
 if (someCondition) {
 return new AssetImage(lesson.imagePath); 
 }
}),

dart

来源：https://stackoverflow.com/questions/56325870/assign-an-image-dynamically-in-flutter

2条答案

按热度按时间

taor4pac1#

您的setState调用错误!最简单的方法是将图像作为小部件的状态，并在setState调用中更新此图像。setState方法不返回任何东西，它只是重建你的小部件。
在_WidgetState类中，您声明为成员：

AssetImage _imageToShow;

您可以在initState方法中提供初始映像。

@override
initState(){
   _imageToShow = AssetImage('youAssetImage');
}

您的容器小部件应声明为：

Container(
            padding: EdgeInsets.only(left: 10.0),
            height: MediaQuery.of(context).size.height * 0.5,
            decoration: new BoxDecoration(
              image: new DecorationImage(
                image: _imageToShow,
                fit: BoxFit.cover,
              ),
            )),
 ),

要使用setState调用更新映像，您只需要：

void updateImage() {
   setState ((){ 
      if (someCondition) {
        _imageToShow = new AssetImage(lesson.imagePath); 
      }
    });
}

但是请记住，必须调用updateImage方法。

赞(0）回复(0）举报 2023-06-19

ippsafx72#

上面的解决方案也可以工作，你可以设置一个名称数组，你可以在资产文件夹中设置相同的图像名称，你可以动态选择你想要使用的图像。假设在您的情况下，您有一个课程列表。

var lesson = ['a','b','c'];

在资源中，文件夹为图像给予相同的名称。（不要忘记更新pubspec.yaml文件）
然后在AssetImage中，您可以动态选择路径。

image:AssetImage('assets/${lesson[index]}.jpg')

记住给图像给予相同的名字，就像这里的a,b and c。
同样的扩展名也是这样的.jpg

image:AssetImage('assets/${lesson[index]}.jpg')

赞(0）回复(0）举报 2023-06-19

我来回答

dart 在 Flutter 中动态分配图像

2条答案

相关问题

热门标签

最新问答