如何在 flutter 中建立一個列表，其中包含允許我切換屏幕的可選項目

Question

我是 Flutter 的新手，所以請不要對我強硬 go。 我試圖了解如何構建屏幕並在它們之間來回導航，從而在導航期間將值帶到其他屏幕。

我想建立這個屏幕：

在 lib 中，我創建了一個模型文件夾，其中包含文件 cat.dart

enum Cat {
  black,
  white
}

extension CatExtension on Cat {

  String get name {
    switch (this) {
      case Cat.black:
        return 'Mr Black Cat';
      case Cat.white:
        return 'Ms White Cat';
      default:
        return null;
    }
  }
}

我認為將代碼分開在 lib 中創建另外兩個文件夾是一個好主意，它們是

• 庫/屏幕
• 庫/小部件

所以我在屏幕中創建了一個select_item.dart並在小部件中創建了cats_items.dart以便在需要的地方導入小部件。

cat_items.dart

class CatsItemsListWidget extends StatelessWidget {

  final cat = Cat.white; // I get null error if I don't do like that

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: EdgeInsets.fromLTRB(31, 24, 30, 88),
      shadowColor: Color(0xFFEDEDEF),
      shape: RoundedRectangleBorder(
          side: new BorderSide(color: Color(0xFFEDEDEF)),
          borderRadius: BorderRadius.circular(10.0)),
      child: ListView(
        scrollDirection: Axis.vertical,
        shrinkWrap: true,
        physics: ScrollPhysics(),
        children: [ 
          ListTile(
            title: Padding(
                padding: EdgeInsets.fromLTRB(0, 20, 0, 4),
                child: Text('Name:',
            subtitle: Padding(
                padding: EdgeInsets.fromLTRB(0, 4, 0, 16),
                child: Text(
                  cat.displayValue,
                )),
          ),
        ],
      ),
    );
  }
}

select_item.dart

class SelectItem extends StatelessWidget {
  SelectItem();

  @override
  Widget build(BuildContext context) {
    final appBarHeight = MediaQuery.of(context).size.height * 0.10;
    return Scaffold(
      appBar: AppBar(
        toolbarHeight: appBarHeight,
        automaticallyImplyLeading: false,
        //title: ,
        elevation: 0,
        backgroundColor: Theme.of(context).backgroundColor,
      ),
      body: SafeArea(
        child: Stack(
          children: [
            SingleChildScrollView(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  CatsItemsListWidget(),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

main.dart

class CatsApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My cats app',
      theme: ThemeData(
        backgroundColor: PRIMARY_COLOR,
        scaffoldBackgroundColor: PRIMARY_COLOR,
      ),
      home: SelectItem(),
    );
  }
}

這不像我得到的那樣工作：

我不明白如何為枚舉 Cat{} 的每個元素創建列表項，以及如何獲取列表中的可點擊項以在點擊時切換屏幕。 我還必須存儲一個與用戶點擊內容相對應的值，例如，如果用戶點擊“Ms White Cat”，我必須存儲一個可以是“MWC”的值，並將這個值帶到另一個屏幕中。 我正在構建的邏輯是否正確？ 如果不是，為什么？ 我怎樣才能達到我所需要的？

Answer 1

您需要使用onTap和Navigator ，例如：

onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => OtherScreen(),
                ),
              );
            },

看看這里的例子