flutter - 单击网格元素以显示更多元素颤动

Question

我有一个联系人列表，想知道如何仅将前 5 个和第 6 个元素显示为“显示更多”元素，单击该元素会显示其余的联系人。我正在寻找有关如何实现此 UI 功能的建议：

标签： fluttergridview

Answer 1

解决方案：

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

class Contact {
  final String name;

  Contact(this.name);
}

class ContactsPage extends StatefulWidget {
  @override
  _ContactsPageState createState() => _ContactsPageState();
}

class _ContactsPageState extends State<ContactsPage> {

  final contacts = [
    Contact("sahar"),
    Contact("Joe"),
    Contact("fo"),
    Contact("Fifo"),
    Contact("Moshe"),
  ];

  var _displayAll = false;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("contacts"),),
      backgroundColor: Colors.white,
      body: Center(
        child:_gridContacts(),
      ),
    );
  }

  Widget _gridContacts() {
    final size = _displayAll ? contacts.length : contacts.length - 2;
    final contactsWidget = List.generate(
        size, (index) => _contactItem(contacts[index]))
      ..add(_seeNoSeeMore());
    return GridView.count(
      crossAxisCount: 3,
      childAspectRatio: 2/1,
      crossAxisSpacing: 10,
      mainAxisSpacing: 10,
      children: contactsWidget,);
  }


  Widget _contactItem(Contact item) {
    return Container(
      color: Colors.blue.withOpacity(0.5),
      padding: EdgeInsets.all(5),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(Icons.person),
          Text(item.name),
        ],
      ),
    );
  }

  Widget _seeNoSeeMore() {
    return InkWell(
      onTap: ()=>setState(()=>_displayAll = !_displayAll),
      child: Container(
        color: Colors.blue.withOpacity(0.5),
        padding: EdgeInsets.all(5),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(Icons.person),
            Text(_displayAll?"hide":"Show all"),
          ],
        ),
      ),
    );
  }
}

注意：为了获得更好的性能，不要使用 setState 而是使用状态管理或本机的一个流构建器。