Question

如何动态分配图像？例如：

    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()，但它给了我一个错误：

此处的表达式是一种无效类型，不能使用

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

Answer 1

您的setState调用错误！最简单的方法是使图像成为窗口小部件的状态，并在setState调用中更新该图像。 setState方法不会返回任何内容，它只会重建您的小部件。

在_WidgetState类中，您声明为成员：

AssetImage _imageToShow;

您可以在initState方法内提供初始图像。

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

您的Container小部件应声明为：

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方法。

Answer 2

以上解决方案也可以工作，您可以设置名称数组，并且可以在Assets文件夹中设置相同的图像名称，并且可以动态选择要使用的图像。假设您有一个课程列表。 var lesson = ['a'，'b'，'c'];

在资产中，文件夹为图像赋予相同的名称。（不要忘记更新pubspec.yaml文件）

然后在AssetImage中，您可以提供可以动态选择的路径。

image：AssetImage（'assets / $ {lesson [index]}。jpg'）

记住要给图像起相同的名称，如此处的a，b和c。

同样的扩展名也应如此处.jpg

image：AssetImage（'assets / $ {lesson [index]}。jpg'）

动态分配图像

2 个答案: