Question

我试图将视图从网格更改为列表视图。我将c.Expires = DateTime.Now.AddSeconds(1);用于第一个视图，但是在单击“更改视图”按钮后，它应该变为垂直列表视图，就像instagram画廊视图一样。

代码段：

更改视图按钮：

StaggeredGridView

用于更改视图的小工具：

 InkWell(
      child:view
       ?Image.asset('assets/icons/view_by1.png') 
       :Image.asset('assets/icons/view_by3.png'), 
        onTap: (){
           setState(() {
             view = !view;
           });
         }
       )

这不能使我满意表示我总共有14张图片并且gridview看起来很完美，并显示了全部14张图像，但是当按下更改视图按钮时，仅显示3至4张图片作为列表视图。

请参阅：

Here short video

Answer 1

您可以借助此方法解决问题，点击浮动操作按钮以更改视图。

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

void main(){
  runApp(MaterialApp(home: Example01()));
}

List<Widget> _tiles = const <Widget>[
  const _Example01Tile(Colors.green, Icons.widgets),
  const _Example01Tile(Colors.lightBlue, Icons.wifi),
  const _Example01Tile(Colors.amber, Icons.panorama_wide_angle),
  const _Example01Tile(Colors.brown, Icons.map),
  const _Example01Tile(Colors.deepOrange, Icons.send),
  const _Example01Tile(Colors.indigo, Icons.airline_seat_flat),
  const _Example01Tile(Colors.red, Icons.bluetooth),
  const _Example01Tile(Colors.pink, Icons.battery_alert),
  const _Example01Tile(Colors.purple, Icons.desktop_windows),
  const _Example01Tile(Colors.blue, Icons.radio),
  const _Example01Tile(Colors.pink, Icons.radio),
  const _Example01Tile(Colors.yellow, Icons.radio),
  const _Example01Tile(Colors.brown, Icons.map),
  const _Example01Tile(Colors.deepOrange, Icons.send),
  const _Example01Tile(Colors.indigo, Icons.airline_seat_flat),
];

class Example01 extends StatefulWidget {
  @override
  _Example01State createState() => _Example01State();
}

class _Example01State extends State<Example01> {
  bool isList= false;
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text('Example 01'),
        ),
        body: new Padding(
            padding: const EdgeInsets.only(top: 12.0),
            child: new StaggeredGridView.countBuilder(
              crossAxisCount: 6,
              itemCount: _tiles.length,
              itemBuilder: (context,i){
                return _tiles[i];
              },
              staggeredTileBuilder: (i)=> isList ?StaggeredTile.count(6,1):StaggeredTile.count(2,2),
              mainAxisSpacing: 1.0,
              crossAxisSpacing: 1.0,
              padding: const EdgeInsets.all(4.0),
            )),
      floatingActionButton: FloatingActionButton(
        child: isList ?Icon(Icons.grid_on):Icon(Icons.list),
        onPressed:(){
          setState(() {
            isList = !isList;
          });
        },
      ),
    );
  }
}

class _Example01Tile extends StatelessWidget {
  const _Example01Tile(this.backgroundColor, this.iconData);

  final Color backgroundColor;
  final IconData iconData;

  @override
  Widget build(BuildContext context) {
    return new Card(
      color: backgroundColor,
      child: new InkWell(
        onTap: () {},
        child: new Center(
          child: new Padding(
            padding: const EdgeInsets.all(4.0),
            child: new Icon(
              iconData,
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}

如何在抖动中更改图像视图？

1 个答案: