在列表视图后禁用 FloatingActionButton 并显示超出限制的消息答案

【问题标题】：Disabling FloatingActionButton after list view and showing a message that the limit is exceeded在列表视图后禁用 FloatingActionButton 并显示超出限制的消息
【发布时间】：2021-06-28 04:27:49
【问题描述】：

如何禁用按钮，在本例中为 FAB(Floating Action Button)，并防止用户因为超出限制并显示消息而向列表中添加更多项目？我正在使用FutureBuilder 和ListView.builder，在用户向列表中添加 3 个项目后，我想禁用 FAB 并阻止用户向列表中添加更多项目并显示某种通知/消息/浮动按钮消息给用户，他超出了每个列表 3 个项目的限制。代码如下：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'screens/add_items_screen.dart';
import 'components/items_list.dart';

class ItemScreen extends StatelessWidget {
  static const String id = 'item_screen';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        iconTheme: IconThemeData(
          color: Colors.grey[600],
        ),
      ),
/// I want to disable this button after the limit of 3 items in the list view
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.grey,
        child: Icon(Icons.add),
        onPressed: () {
          showModalBottomSheet(
              context: context,
              isScrollControlled: true,
              builder: (context) => SingleChildScrollView(
                      child: Container(
                    padding: EdgeInsets.only(
                        bottom: MediaQuery.of(context).viewInsets.bottom),
                    child: AddItemScreen(),
                  )));
        },
      ),
      body: SafeArea(
        child: SingleChildScrollView(
          child: Container(
            padding: EdgeInsets.all(20.0),
            color: Colors.grey[100],
            child: Container(
              height: 800,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    'Item List Display',
                    style: TextStyle(
                      fontSize: 22.0,
                      fontWeight: FontWeight.w700,
                    ),
                  ),
                  SizedBox(
                    height: 20.0,
                  ),
                  Expanded(
                    child: Column(
                      children: [
/// Here is where the items are rendered as a list
                        Expanded(child: ItemList()),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

项目列表组件：

import 'package:flutter/material.dart';
import 'common/api/api_caller.dart';
import 'utilities/item_api_helper.dart';
import 'models/item.dart';
import 'stores/item_store.dart';
import 'dart:async';
import 'package:provider/provider.dart';


class ItemList extends StatefulWidget {
  @override
  _ItemList createState() => _ItemList();
}

class _ItemList extends State<ItemList> {
  Future<HTTPResponse<List<ItemData>>> _getItemList() async {
    var _itemData = await APICaller.instance.getItems();
    var provider = Provider.of<ItemDatStore>(context, listen: false);

    provider.setItemList(_itemData.data, notify: false);

    return _itemData;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: FutureBuilder<HTTPResponse<List<ItemData>>>(
          future: _getItemList(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return Consumer<ItemDataStore>(
                builder: (context, itemData, child) {
                  return ListView.builder(
                    itemCount: itemData.itemList.length,
                    itemBuilder: (context, index) {
                      ItemData items =
                          itemData.getItemByIndex(index);
                      return Card(
                        child: Container(
                          padding: EdgeInsets.all(10.0),
                          child: Text('items.title'),
                  ),
              );
            } else if (snapshot.hasError) {
              return Text("${snapshot.error}");
            }
            return Container();
          },
        ),
      ),
    );
  }
}

我尝试使用 if 语句，我可以在其中定义 if(itemData.itemList.length <3) 它应该返回这三个项目，else {Text('Item limit of 3 is exceeded')} 但我不确定这是否是正确的方式，或者我是否定义正确，因为我把它放在Item List 组件中，我需要把它放在Item Screen 中。提前感谢您的帮助！

【问题讨论】：

标签： flutter mobile flutter-layout

【解决方案1】：

你可以像这样禁用 FAB

onPressed: items.length < 3? addItemToList : null;

addItemToList 是

 void addItemToList(){
     // Do Something here
 }

【讨论】：

【解决方案2】：

你可以用 Visibility 包裹你的 Floating 动作按钮，它隐藏起来并且不再工作了 :)

Visibility(
            visible: items.length > 3,
            child : FAB here,

          ),

【讨论】：

谢谢，但是如何通知用户按钮由于超出限制而被禁用？
您可以通知在您的工厂内外显示一些倒计时数字。