Question

我正在将Wordpress网站上的帖子添加到Flutter应用中。

每个帖子都有3张图片，这是图片的布局

我想做的是，当我点击“图像1”或“图像2”或“图像3”时，该图像将显示在“主图像”上。

这有意义吗？

Answer 1

我希望以下代码能为您提供帮助。在以下代码中，我使用了网络映像，但您也可以使用断言映像。

  import 'package:flutter/material.dart';

  void main() => runApp(new Demo());

  class Demo extends StatefulWidget {
    @override
    _DemoState createState() => _DemoState();
  }

  class _DemoState extends State<Demo> with TickerProviderStateMixin {


    String image1 = "http://via.placeholder.com/350x150";
    String image2 = "http://via.placeholder.com/200x150";
    String image3 = "http://via.placeholder.com/200x150";
    String currentMainImage = "http://via.placeholder.com/350x150" ;
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: new Text("table demo"),
          ),
          body: new Container(
            child: new Column(
              children: <Widget>[
                Container(
                    height:150.0,
                    child: new Image.network(currentMainImage,fit: BoxFit.fill,)
                ),
                new Row(
                  children: <Widget>[
                    Expanded(
                      child: InkWell(
                        onTap : (){
                            setState(() {
                              currentMainImage = image1;
                            });
                        },
                        child: new Image.network(image1)
                       )
                    ),
                    Expanded(
                        child: InkWell(
                            onTap : (){
                              setState(() {
                                currentMainImage = image2;
                              });
                            },
                            child: new Image.network(image2)
                        )
                    ),
                    Expanded(
                        child: InkWell(
                            onTap : (){
                              setState(() {
                                currentMainImage = image3;
                              });
                            },
                            child: new Image.network(image3)
                        )
                    ),
                  ],
                )
              ],

            )
          )
        )
      );
    }
  }

Answer 2

您需要使用stateful小部件
您可以使用Column和Row来实现该布局。
然后用Image在布局中显示图像。
您可以专门使用Image.network(url)构造函数来显示来自您的Word Press网站的图像。
image1，image2和image3可以包装在InkWell小部件中。 InkWell的{{1}}可以包含代码来更新setState()中的主图像小部件的url /图像

希望有帮助！

轻按一下即可更改图像来源

2 个答案: