Flutter 在 Stateless Widget 中动态添加项目到 ListView

Question

我正在创建一个 Flutter 应用程序。我已经第 3 天无法使用 'Add' 按钮将项目手动添加到 ListView。

我尝试使用 setState，但它在无状态小部件中不起作用。因为我有一条从有状态小部件到无状态的路线。我正在使用 Navigator.push(...).

然后我尝试使用 Cubit，但它不起作用。 Flutter - BloC Cubit function doesn't emitting state

我能做什么？

[代码量太大了。我上传了必要的部分]

主页（状态小部件）

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

Stateful Widget

class _MyHomePageState extends State<MyHomePage> {
 @override
  Widget build(BuildContext context) {
   return Scaffold(
      appBar: AppBar(
       title: 'List App',
       actions: [
          IconButton(
              onPressed: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => SearchPage())
                );
                }
           ])
})

SearchPage（带 ListView）

class SearchPage extends StatelessWidget {
  const SearchPage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      child: Builder(builder: (BuildContext context) {
        final TabController tabController = DefaultTabController.of(context)!;
        tabController.addListener(() {
          if (!tabController.indexIsChanging) {
          }
        });
return Scaffold(
body: (context, items) => TabBarView(
children: [
Container(
child: FutureBuilder(
                      future: items_client.getItems(),
                      builder: (BuildContext context, AsyncSnapshot<List<Item>> snapshot) {
                        if (snapshot.hasData) {
                          items = snapshot.data!;

return ListView(
                                children: items.asMap()
                                    .map(
                                      (i, item) => MapEntry(i, 
Column(
    children: [
      Text('${item.name'})
    ]

))
)
}
}
)
]
)
)
  }
}

Answer 1

至于你的代码，我已经为你创建了一个示例，请检查示例

主页：

import 'package:demo_stack/search_page.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomePage(),
    );
  }
}

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

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('List app'),
        actions: [
          IconButton(
              onPressed: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => const SearchPage()));
              },
              icon: const Icon(Icons.six__ft_apart_rounded))
        ],
      ),
    );
  }
}

搜索小部件。

import 'package:flutter/material.dart';

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

  @override
  State<SearchPage> createState() => _SearchPageState();
}

// Using the statefull widget to change the index of tab bars
class _SearchPageState extends State<SearchPage> {
  var tabIndex = 0;

  @override
  Widget build(BuildContext context) {
    var childList = [
      const FirstPage(),
      Container(color: Colors.red),
      Container(color: Colors.yellow),
      Container(color: Colors.cyan),
    ];

    return Scaffold(
      body: DefaultTabController(
        length: 4,
        initialIndex: tabIndex,
        child: Scaffold(
          appBar: AppBar(),
          body: childList[tabIndex],
          bottomNavigationBar: TabBar(
            onTap: (index) {
              setState(() {
                tabIndex = index;
              });
            },
            labelColor: Colors.black,
            tabs: const <Widget>[
              Tab(text: 'First Page'),
              Tab(text: 'Red'),
              Tab(text: 'Yellow'),
              Tab(text: 'Cyan'),
            ],
          ),
        ),
      ),
    );
    ;
  }
}

class FirstPage extends StatelessWidget {
  const FirstPage({Key? key}) : super(key: key);

  Future<List<Item>> getItems() async {
    await Future.delayed(const Duration(seconds: 3));

    return [Item("one"), Item("two"), Item("three")];
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<Item>>(
        future: getItems(),
        builder: (BuildContext context, snapshot) {
          
          //This is to check currently in which state the app is 
          // there are four states none,waiting,active,done
          // you can add the check accordingly
          
          print(snapshot.connectionState);
          
          return snapshot.data == null
              ? const Center(
                  child: CircularProgressIndicator(),
                )
              : ListView.builder(
                  itemCount: snapshot.data!.length,
                  itemBuilder: (context, index) {
                    var item = snapshot.data![index];
                    return Padding(
                      padding: const EdgeInsets.all(15.0),
                      child: Text(item.name),
                    );
                  });
        });
  }
}

class Item {
  final String name;

  Item(this.name);
}

这是搜索页面

如果您仍然遇到任何问题，请检查 futurebuilder 状态并相应地添加检查它会起作用。

谢谢。

Flutter 在 Stateless Widget 中动态添加项目到 ListView

Flutter adding items dynamically to ListView in Stateless Widget

android

flutter

bloc