FLUTTER

Question

大家好我正在尝试使用选项卡内容中存储的列表中的项目数来更新选项卡名称。该列表在选项卡内容组件中获取。如何将列表长度变量传递给选项卡标题？

// PARENT WIDGET

    class EventsScreen extends StatefulWidget {
  const EventsScreen({Key? key}) : super(key: key);

  @override
  State<EventsScreen> createState() => _EventsScreenState();
}

class _EventsScreenState extends State<EventsScreen> {
  
  @override
  Widget build(BuildContext context) {
    return Parent(
      child: TabbedHeader(
        tabTitles: [
          'Žiadosti (HERE I WANT TO ADD LENGTH OF REQUESTS LIST)'
        ],
        title: 'Udalosti',
        tabContents: [
          EventRequestTab() // CHILD COMPONENT WITH LIST OF REQUESTS
        ],
      ),
    );
  }
}

// CHILD WIDGET WITH REQUESTS LIST

class EventRequestTab extends StatefulWidget {
  const EventRequestTab({Key? key, this.requests}) : super(key: key);

  @override
  State<EventRequestTab> createState() => _EventRequestState();
}

class _EventRequestState extends State<EventRequestTab> {
  late EventService _eventService;
  late List<EventRequest>? requests;

  @override
  void initState() {
    super.initState();
    _eventService = EventService();
    requests = // FETCHING LIST OF REQUESTS

  }
} ... build method etc ....

在 initState 的 child 小部件中，我正在获取稍后显示在 ListView 中的请求列表。但我不知道如何将获取列表的长度传递给 TabbedHeader 的 tabTitles 属性。 TabbedHeader 是我为 TabBar 小部件定制的包装器。

Answer 1

您可以通过将回调传递到 EventRequestTab 小部件来传递在 EventRequestTab 状态 class 的 initState 中获取的列表。此回调将 return 获取的列表作为其参数，并在 EventsScreen 中使用列表的长度更新选项卡名称

这是对您的代码的更新：


// PARENT WIDGET

class EventsScreen extends StatefulWidget {
  const EventsScreen({Key? key}) : super(key: key);

  @override
  State<EventsScreen> createState() => _EventsScreenState();
}

class _EventsScreenState extends State<EventsScreen> {
  int? lengthOfRequestList; 


  void updateTabName(List<EventRequest> listOfRequests) {
    setState(() {
      lengthOfRequestList = listOfRequests.length;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Parent(
      child: TabbedHeader(
        tabTitles: ['Žiadosti (${int == null ? '...' : int})'],
        title: 'Udalosti',
        tabContents: [
          EventRequestTab(
            onListFetched: updateTabName,
          ) // CHILD COMPONENT WITH LIST OF REQUESTS
        ],
      ),
    );
  }
}

// CHILD WIDGET WITH REQUESTS LIST

class EventRequestTab extends StatefulWidget {
  final Function(List<EventRequest> fetchedList) onListFetched; 
  const EventRequestTab({Key? key, required this.onListFetched}) : super(key: key); 

  @override
  State<EventRequestTab> createState() => _EventRequestState();
}

class _EventRequestState extends State<EventRequestTab> {
  late EventService _eventService;
  late List<EventRequest>? requests;

  @override
  void initState() {
    super.initState();
    _eventService = EventService();
    requests = // FETCHING LIST OF REQUESTS
        widget.onListFetched(requests); 
  }
}

FLUTTER - 选项卡名称中的动态字符串基于选项卡中的内容长度 body

FLUTTER - Dynamic string in tab name based on content length in tab body

user-interface

tabbar

uitabbarcontroller