Flutter - 根据屏幕改变body答案

【问题标题】：Flutter - change body according to the screenFlutter - 根据屏幕改变body
【发布时间】：2021-04-27 15:49:53
【问题描述】：

我希望在单击其中一个徽标时显示该品牌的型号，目前我只能显示[第一个品牌的型号]。2 因此，无论您单击哪个屏幕，都会出现。如何更改代码以显示特定品牌型号？

我只发布了关键代码，这里我导航到页面，模型页面”（但我认为它不相关，因为我猜测问题在于正文的显示（第二个代码）

import 'package:flutter/material.dart';
import 'package:flutter_meineapp/Indexes/Marken.dart';
import 'package:flutter_meineapp/Screen/Home/BodyHomescreen.dart';
import 'package:flutter_meineapp/Screen/Kontakt/Kontakt.dart';
import 'package:flutter_meineapp/Screen/Modelle/Modelle.dart';


class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _selectedIndex = 0;
  List<Widget> _widgetOptions = <Widget> [
    Container(
      color: Color(0xffDDBEA9),
      child: GridView.builder(
        itemCount: modelle.length,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          ),
        itemBuilder: (context,index) =>
            BodyHomescreen(
              modell: modelle[index], press: () => Navigator.push(
                context, MaterialPageRoute(
              builder: (context) => Modelle( modell: modelle[index],)
              ,)
            ),
            ),
      ),
    ),
    Text("Text2"),
    Kontakt()
  ];

这是模型页面，我猜我需要根据索引更改body，但经过研究我找不到解决方案，有什么建议吗？

    class Modelle extends StatelessWidget {
  final Modell modell;

  const Modelle({Key key, this.modell}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          Container(
            width: 50,
            child: Image.asset(modell.image),
          ),
        ],
        title: Text(modell.title),
        centerTitle: true,
        backgroundColor: Color(0xffCB997E),
      ),
      body: ListView.builder(
        itemCount: ModelleAlfaRomeo.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(ModelleAlfaRomeo[index].title),
          );
        },
      ),
    );
  }

Class ,,Modell 的代码

    class Modell {
  final String image, title;
  final int id;
  Modell({
    this.image,
    this.title,
    this.id,
  });
}

List<Modell> modelle = [
  Modell(
    id: 1,
    title: "Alfa Romeo",
    image: "Assets/Images/AlfaRomeo.png"
  ),
  Modell(
      id: 2,
      title: "Audi",
      image: "Assets/Images/Audi.png"
  ),
  Modell(
      id: 3,
      title: "BMW",
      image: "Assets/Images/BMW.png"
  ),
  Modell(
      id: 4,
      title: "Chevrolet",
      image: "Assets/Images/Chevrolet.png"
  ),
  Modell(
      id: 5,
      title: "Citroen",
      image: "Assets/Images/Citroen.png"
  ),
  Modell(
      id: 6,
      title: "Dacia",
      image: "Assets/Images/Dacia.png"
  ),
  Modell(
      id: 7,
      title: "Fiat",
      image: "Assets/Images/Fiat.png"
  ),
  Modell(
      id: 8,
      title: "Ford",
      image: "Assets/Images/Ford.png"
  ),
  Modell(
      id: 9,
      title: "Honda",
      image: "Assets/Images/Honda.png"
  ),
  Modell(
      id: 10,
      title: "Hyundai",
      image: "Assets/Images/Hyundai.png"
  ),
  Modell(
      id: 11,
      title: "Jaguar",
      image: "Assets/Images/Jaguar.png"
  ),
  Modell(
      id: 12,
      title: "Jeep",
      image: "Assets/Images/Jeep.png"
  ),
  Modell(
      id: 13,
      title: "KIA",
      image: "Assets/Images/KIA.png"
  ),
  Modell(
      id: 14,
      title: "LandRover",
      image: "Assets/Images/LandRover.png"
  ),
  Modell(
      id: 15,
      title: "Lexus",
      image: "Assets/Images/Lexus.png"
  ),
  Modell(
      id: 16,
      title: "Mazda",
      image: "Assets/Images/Mazda.png"
  ),
  Modell(
      id: 17,
      title: "Mercedes",
      image: "Assets/Images/Mercedes.png"
  ),
  Modell(
      id: 18,
      title: "Mini",
      image: "Assets/Images/Mini.png"
  ),
  Modell(
      id: 19,
      title: "Mitsubishi",
      image: "Assets/Images/Mitsubishi.png"
  ),
  Modell(
      id: 20,
      title: "Nissan",
      image: "Assets/Images/Nissan.png"
  ),
  Modell(
      id: 21,
      title: "Opel",
      image: "Assets/Images/Opel.png"
  ),
  Modell(
      id: 22,
      title: "Peugeot",
      image: "Assets/Images/Peugeot.png"
  ),
  Modell(
      id: 23,
      title: "Porsche",
      image: "Assets/Images/Porsche.png"
  ),
  Modell(
      id: 24,
      title: "Renault",
      image: "Assets/Images/Renault.png"
  ),
  Modell(
      id: 25,
      title: "Saab",
      image: "Assets/Images/Saab.png"
  ),
  Modell(
      id: 26,
      title: "Seat",
      image: "Assets/Images/Seat.png"
  ),
  Modell(
      id: 27,
      title: "Skoda",
      image: "Assets/Images/Skoda.png"
  ),
  Modell(
      id: 28,
      title: "Smart",
      image: "Assets/Images/Smart.png"
  ),
  Modell(
      id: 29,
      title: "Subaru",
      image: "Assets/Images/Subaru.png"
  ),
  Modell(
      id: 30,
      title: "Suzuki",
      image: "Assets/Images/Suzuki.png"
  ),
  Modell(
      id: 31,
      title: "Toyota",
      image: "Assets/Images/Toyota.png"
  ),
  Modell(
      id: 32,
      title: "Volvo",
      image: "Assets/Images/Volvo.png"
  ),
  Modell(
      id: 33,
      title: "VW",
      image: "Assets/Images/VW.png"
  ),
];

ModelleAlfaRomeo 类的代码 -> 与描述汽车品牌模型的所有其他类的结构完全相同

    class ModellAlfaRomeo {
  final String title;
  final int id;
  ModellAlfaRomeo({
    this.title,
    this.id,
  });
}
List<ModellAlfaRomeo> ModelleAlfaRomeo = [
  ModellAlfaRomeo(
    id: 1,
    title: "147" ,
  ),
  ModellAlfaRomeo(
    id: 2,
    title: "156 / Crosswagon Q4" ,
  ),
  ModellAlfaRomeo(
    id: 3,
    title: "159" ,
  ),
  ModellAlfaRomeo(
    id: 4,
    title: "166" ,
  ),
  ModellAlfaRomeo(
    id: 5,
    title: "4c" ,
  ),
  ModellAlfaRomeo(
    id: 6,
    title: "Brera" ,
  ),
  ModellAlfaRomeo(
    id: 7,
    title: "GT" ,
  ),
  ModellAlfaRomeo(
    id: 8,
    title: "Giulia (Typ 952)" ,
  ),
  ModellAlfaRomeo(
    id: 9,
    title: "Giulietta (Typ 940)" ,
  ),
  ModellAlfaRomeo(
    id: 10,
    title: "MiTo" ,
  ),
  ModellAlfaRomeo(
    id: 11,
    title: "Spider" ,
  ),
  ModellAlfaRomeo(
    id: 12,
    title: "Stelvio" ,
  ),
];

今天尝试将 ModelleAlfaRomeo、ModelleChevrolet 等所有类的代码嵌入到这个 ,,Modell" 类中，但还不知道该怎么做

【问题讨论】：

什么是模型？你在哪里定义的？
它是一个类，包含一个包含所有汽车品牌的所有型号的列表（带有 ID、照片和名称）。我现在正在尝试获取此列表中每个品牌的所有型号详细信息，现在所有汽车品牌型号都在单独的类中，例如包含 ModelleAlfaRomeo 类所有阿尔法罗密欧汽车型号的标题列表。你能听懂我的解释吗？

标签： flutter dart flutter-layout

【解决方案1】：

以下是构建类的方式：

/// model.dart
import 'model_make.dart';

class Model {
  final int id;
  final String title;
  final String image;
  final List<ModelMakeData> modelData;

  Model({
    required this.image,
    required this.title,
    required this.id,
    required this.modelData,
  });

/// Create your models on the fly
List<Model> models = [
  // AlphaRomeo model
  Model(
    id: 1,
    title: "AlphaRomeo",
    image: "Assets/Images/AlfaRomeo.png",
    modelData : <ModelMakeData>[
      ModelMakeData(
        id: 1,
        title: "147" ,
      ),
      ModelMakeData(
        id: 2,
        title: "156 / Crosswagon Q4",
      ),
      ModelMakeData(
        id: 3,
        title: "159",
      ),
      // other data go here....
    ]
  );
  // Audi model
  Model(
    id: 2,
    title: "Audi",
    image: "Assets/Images/Audi.png",
    modelData: <ModelMakeData>[
      // Audi's data go here ...
    ]
  );
  //other models go here ...
];

创建另一个文件来保存模型数据

/// model_make.dart
class ModelMakeData{
  final int id;
  final String title;

  const ModelMakeData({
    required this.id,
    required this.title,
  })
}

要在您的小部件中使用该类，您可以：

/// home_screen.dart
import 'package:flutter/material.dart';
import 'package:flutter_meineapp/Indexes/Marken.dart';
import 'package:flutter_meineapp/Screen/Home/BodyHomescreen.dart';
import 'package:flutter_meineapp/Screen/Kontakt/Kontakt.dart';
import 'package:flutter_meineapp/Screen/Modelle/Modelle.dart';//<--- update to point to model.dart


class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _selectedIndex = 0;
  List<Widget> _widgetOptions = <Widget> [
    Container(
      color: Color(0xffDDBEA9),
      child: GridView.builder(
        itemCount: models.length,// <--- updated
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          ),
        itemBuilder: (context,index) =>
            BodyHomescreen(
              modell: models[index], press: () => Navigator.push(
                context, MaterialPageRoute(
              builder: (context) => Modelle( modell: models[index],)
              ,)
            ),
            ),
      ),
    ),
    Text("Text2"),
    Kontakt()
  ];

在 Modelle 小部件中您可以这样做：

class Modelle extends StatelessWidget {
  final Model modell;

  const Modelle({Key key, this.modell}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          Container(
            width: 50,
            child: Image.asset(modell.image),
          ),
        ],
        title: Text(modell.title),
        centerTitle: true,
        backgroundColor: Color(0xffCB997E),
      ),
      body: ListView.builder(
        itemCount: modell.modelData.length,// <--- now you are getting modelData!
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(modell.modelData[index].title), // <--- Updated
          );
        },
      ),
    );
  }

注意虽然这个解决方案是可以的。我建议创建一个 json 文件，在其中存储所有静态数据，并使用 json_annotation 和 json_serializable 生成你的类。你可以阅读更多关于这个here 你的 json 文件看起来像：
// cars json data
[
 {
   "id":1,
   "title": "Alfa Rome",
   "image": "Assets/Images/AlfaRomeo.png",
   "modelData":[
     {
       "id": 1,
       "title": "147" ,
     }
     {
       "id": 2,
       "title": "156 / Crosswagon Q4" ,
     }
     {
       "id": 3,
       "title": "159" ,
     }
   ],
 },
 {
   "id":2,
   "title": "Audi",
   "image": "Assets/Images/Audi.png",
   "modelData":[
     {
       "id": 1,
       "title":
     }
     //whatever list of data you have for audi
   ],
 }
]

【讨论】：

非常感谢您的努力！如果我根据那个清理我的数据，如果我点击某个品牌，我现在怎么能改变车身，所以如果我点击奥迪，就会显示所有奥迪车型的列表，而不是现在的样子，那就是只描绘了阿尔法罗密欧
不客气。我认为现在它应该在模型按钮单击时显示每个模型数据的列表！
抱歉没看到，需要json_to_model 1.4.0包导入model_make.dart部分吗？
不，你不是 ;) 保持良好的能量

【解决方案2】：

根据您的代码，您没有使用传递给Modelle 小部件的模型！你总是指同一个ModelleAlfaRomeo 模型。这就是为什么你得到相同的观点！

不是用户，您的模型结构如何，但以下更新可能会有所帮助

  class Modelle extends StatelessWidget {
  final Modell modell;

  const Modelle({Key key, this.modell}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          Container(
            width: 50,
            child: Image.asset(modell.image),
          ),
        ],
        title: Text(modell.title),
        centerTitle: true,
        backgroundColor: Color(0xffCB997E),
      ),
      body: ListView.builder(
        itemCount: medell.length, //<---- Update this  
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(modell.title), // <---- Update this
          );
        },
      ),
    );
  }

【讨论】：

首先感谢您的帮助，但我正在寻找不同的东西。也许我没有正确地问问题，我希望如果我点击某个品牌，那个 ModelleAlfaRomeo 被正确的品牌取代，例如如果我按下雪佛兰，一切都应该保持不变，只是 ModelleAlfaRomeo 应该变成ModellChevrolet，我已经定义了一切，但我不知道如何让它们改变，你明白吗？
什么是ModelleAlfaRomeo？？？一个抽象类？你可以在你的 Modell 类中添加一个属性。这样您就可以像这样访问它：Modell.make.length 和 Modell.make.title
我只是将它定义为一个简单的类，就像 Modell 类（这个名字有误导性 -> 我应该改变它，它负责你在第一个屏幕上看到的品牌）。在显示品牌模型的每个类别中，都有属于该品牌的所有模型（作为对象）的列表。所以我有一个 ModellAlfaRomeo 类，它包含一个包含该品牌所有型号的列表，一个 ModellChevrolet 类，它包含一个包含该品牌所有型号的列表等等。你明白吗？如果您愿意，我可以向您发送更详细的屏幕截图

【解决方案3】：

您可以使用 LayoutBuilder 小部件。

参考：https://api.flutter.dev/flutter/widgets/LayoutBuilder-class.html

【讨论】：

没听懂，怎么弄？
stackoverflow.com/questions/67286438/…

【解决方案4】：

你可以创建一个地图

Map<int, dynamic> modelData = {
0: ModellAlfaRomeo,
1: ModelAudi,
...
}
The get the moddell data based on the index
```dart 
print(modelData[0]); // => ModellAflaRomeo
print(modelData[1]); // => ModellAudi

注意这不被认为是一个好的做法，因为它很难维持。你应该记住什么索引对应什么模型数据。相反，我建议您将 modelData 存储在 Modell 类本身中，以便您可以通过实例访问它，而不是在地图中查找它！：

这里是类的代码 -> Modell & ModellAlfaRomeo

    class Modell {
  final String image, title;
  final int id;
  Modell({
    this.image,
    this.title,
    this.id,
  });
}

List<Modell> modelle = [
  Modell(
    id: 1,
    title: "Alfa Romeo",
    image: "Assets/Images/AlfaRomeo.png"
  ),
  Modell(
      id: 2,
      title: "Audi",
      image: "Assets/Images/Audi.png"
  ),
  Modell(
      id: 3,
      title: "BMW",
      image: "Assets/Images/BMW.png"
  ),
  Modell(
      id: 4,
      title: "Chevrolet",
      image: "Assets/Images/Chevrolet.png"
  ),
  Modell(
      id: 5,
      title: "Citroen",
      image: "Assets/Images/Citroen.png"
  ),
  Modell(
      id: 6,
      title: "Dacia",
      image: "Assets/Images/Dacia.png"
  ),
  Modell(
      id: 7,
      title: "Fiat",
      image: "Assets/Images/Fiat.png"
  ),
  Modell(
      id: 8,
      title: "Ford",
      image: "Assets/Images/Ford.png"
  ),
  Modell(
      id: 9,
      title: "Honda",
      image: "Assets/Images/Honda.png"
  ),
  Modell(
      id: 10,
      title: "Hyundai",
      image: "Assets/Images/Hyundai.png"
  ),
  Modell(
      id: 11,
      title: "Jaguar",
      image: "Assets/Images/Jaguar.png"
  ),
  Modell(
      id: 12,
      title: "Jeep",
      image: "Assets/Images/Jeep.png"
  ),
  Modell(
      id: 13,
      title: "KIA",
      image: "Assets/Images/KIA.png"
  ),
  Modell(
      id: 14,
      title: "LandRover",
      image: "Assets/Images/LandRover.png"
  ),
  Modell(
      id: 15,
      title: "Lexus",
      image: "Assets/Images/Lexus.png"
  ),
  Modell(
      id: 16,
      title: "Mazda",
      image: "Assets/Images/Mazda.png"
  ),
  Modell(
      id: 17,
      title: "Mercedes",
      image: "Assets/Images/Mercedes.png"
  ),
  Modell(
      id: 18,
      title: "Mini",
      image: "Assets/Images/Mini.png"
  ),
  Modell(
      id: 19,
      title: "Mitsubishi",
      image: "Assets/Images/Mitsubishi.png"
  ),
  Modell(
      id: 20,
      title: "Nissan",
      image: "Assets/Images/Nissan.png"
  ),
  Modell(
      id: 21,
      title: "Opel",
      image: "Assets/Images/Opel.png"
  ),
  Modell(
      id: 22,
      title: "Peugeot",
      image: "Assets/Images/Peugeot.png"
  ),
  Modell(
      id: 23,
      title: "Porsche",
      image: "Assets/Images/Porsche.png"
  ),
  Modell(
      id: 24,
      title: "Renault",
      image: "Assets/Images/Renault.png"
  ),
  Modell(
      id: 25,
      title: "Saab",
      image: "Assets/Images/Saab.png"
  ),
  Modell(
      id: 26,
      title: "Seat",
      image: "Assets/Images/Seat.png"
  ),
  Modell(
      id: 27,
      title: "Skoda",
      image: "Assets/Images/Skoda.png"
  ),
  Modell(
      id: 28,
      title: "Smart",
      image: "Assets/Images/Smart.png"
  ),
  Modell(
      id: 29,
      title: "Subaru",
      image: "Assets/Images/Subaru.png"
  ),
  Modell(
      id: 30,
      title: "Suzuki",
      image: "Assets/Images/Suzuki.png"
  ),
  Modell(
      id: 31,
      title: "Toyota",
      image: "Assets/Images/Toyota.png"
  ),
  Modell(
      id: 32,
      title: "Volvo",
      image: "Assets/Images/Volvo.png"
  ),
  Modell(
      id: 33,
      title: "VW",
      image: "Assets/Images/VW.png"
  ),
];

    class ModellAlfaRomeo {
  final String title;
  final int id;
  ModellAlfaRomeo({
    this.title,
    this.id,
  });
}
List<ModellAlfaRomeo> ModelleAlfaRomeo = [
  ModellAlfaRomeo(
    id: 1,
    title: "147" ,
  ),
  ModellAlfaRomeo(
    id: 2,
    title: "156 / Crosswagon Q4" ,
  ),
  ModellAlfaRomeo(
    id: 3,
    title: "159" ,
  ),
  ModellAlfaRomeo(
    id: 4,
    title: "166" ,
  ),
  ModellAlfaRomeo(
    id: 5,
    title: "4c" ,
  ),
  ModellAlfaRomeo(
    id: 6,
    title: "Brera" ,
  ),
  ModellAlfaRomeo(
    id: 7,
    title: "GT" ,
  ),
  ModellAlfaRomeo(
    id: 8,
    title: "Giulia (Typ 952)" ,
  ),
  ModellAlfaRomeo(
    id: 9,
    title: "Giulietta (Typ 940)" ,
  ),
  ModellAlfaRomeo(
    id: 10,
    title: "MiTo" ,
  ),
  ModellAlfaRomeo(
    id: 11,
    title: "Spider" ,
  ),
  ModellAlfaRomeo(
    id: 12,
    title: "Stelvio" ,
  ),
];

【讨论】：

那么我应该像嵌套类那样做吗（我不确定你是否可以在 dart 中做一个 [我知道如何在 Python 中做] 或类似的东西）？然后我应该能够通过 CarBrands.SpecificModell[index].title 访问数据？
是的，嵌入类肯定会有所帮助。您可以分享定义类的代码吗？会有很大帮助
这让事情变得有点清楚了。我已经发布了一个基于此的新答案。我希望它能帮助你解决问题;)

【解决方案5】：

使用来自nb_utils 的响应式小部件。只需导入这个包并使用它。

这里是代码示例。您可以根据手机、平板电脑或网络屏幕尺寸更改小部件。

Responsive(
  mobile: MobileWidget(),
  tablet: TabletWidget(),
  web: WebWidget(),
),

如需了解更多信息，请回复本帖或联系我。

【讨论】：