flutter - 看大图 onTapping in flutter

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)
                        )
                    ),
                  ],
                )
              ],

            )
          )
        )
      );
    }
  }