如何在 Flutter 中使用 Constructor class 添加多个字符串

Question

我制作了两个小部件并在 main.dart 中调用了它们。我想要 HomePage class 中的 AntiRaggingCell 小部件获取不同字符串的详细信息，例如姓名、标签、部门、Phone 编号、联系人和电子邮件。我的代码现在所做的是我必须在 AntiRaggingDetailChip 中放入每个细节，这样代码就会变得混乱。

我的代码，

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

final Color antiRaggingCellBorderColor = Color(0xFFE6E6E6);
final Color chipBackgroundColor = Color(0xFFF6F6F6);

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Squad',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('Squad'),
      ),
      body: SafeArea(
        child: ListView.builder(
          itemBuilder: (context, index) {
            return Column(
              children: <Widget>[
                AntiRaggingCell(),
                AntiRaggingCell(),
                AntiRaggingCell(),
                AntiRaggingCell(),
                AntiRaggingCell(),
              ],
            );
          },
          shrinkWrap: true,
          itemCount: 1,
          physics: ClampingScrollPhysics(),
        ),
      ),
      );
  }
}

class AntiRaggingCell extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(
                Radius.circular(10.0),
              ),
              border: Border.all(color: Colors.black),
            ),
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Center(
                    child: Wrap(
                      alignment: WrapAlignment.spaceEvenly,
                      spacing: 8.0,
                      children: <Widget>[
                        AntiRaggingDetailChip(Icons.person, 'Maruf Hassan'),
                        AntiRaggingDetailChip(Icons.label, 'Chairman'),
                        AntiRaggingDetailChip(Icons.mail, 'maruf@gmail.com'),
                        AntiRaggingDetailChip(Icons.phone, '1234567890'),
                        Center(
                          child: AntiRaggingDetailChip(Icons.account_balance,
                              'Computer Science & Engineering'),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}

class AntiRaggingDetailChip extends StatelessWidget {
  final IconData iconData;
  final String label;

  AntiRaggingDetailChip(this.iconData, this.label);

  @override
  Widget build(BuildContext context) {
    return RawChip(
      label: Text(label),
      labelStyle: TextStyle(color: Colors.black, fontSize: 14.0),
      backgroundColor: chipBackgroundColor,
      avatar: Icon(iconData),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.all(
          Radius.circular(10.0),
        ),
      ),
    );
  }
}

我希望这段代码接受这样的输入

body: SafeArea(
        child: ListView.builder(
          itemBuilder: (context, index) {
            return Column(
              children: <Widget>[
                AntiRaggingCell('Aman Khan','Member','abc@gmail.com','123545894', 'MTECH'),
                AntiRaggingCell('Wasim Khan','President','abc@gmail.com','123545894'),
                AntiRaggingCell('Afzal Khan','Member','abc@gmail.com','123545894'),
                AntiRaggingCell('Arman Khan','Member','abc@gmail.com','123545894'),
                AntiRaggingCell('Kalam Khan','Member','abc@gmail.com','123545894'),
              ],
            );
          },

Answer 1

只需添加一个带有所需参数的构造函数即可。

这是一个例子

     final name;
  final email;

  const MyApp({Key key, this.name, this.email}) : super(key: key);

Answer 2

import 'package:flutter/material.dart';

class AntiRaggingCell extends StatelessWidget {
  final String name;
  final String position;
  final String email;
  final String phone;
  final String org;

  AntiRaggingCell(this.name, this.position, this.email, this.phone, {this.org});
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(
                Radius.circular(10.0),
              ),
              border: Border.all(color: Colors.black),
            ),
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Center(
                    child: Wrap(
                      alignment: WrapAlignment.spaceEvenly,
                      spacing: 8.0,
                      children: <Widget>[
                        AntiRaggingDetailChip(Icons.person, 'Maruf Hassan'),
                        AntiRaggingDetailChip(Icons.label, 'Chairman'),
                        AntiRaggingDetailChip(Icons.mail, 'maruf@gmail.com'),
                        AntiRaggingDetailChip(Icons.phone, '1234567890'),
                        Center(
                          child: AntiRaggingDetailChip(Icons.account_balance,
                              'Computer Science & Engineering'),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}

这样称呼 class：

children: <Widget>[
                AntiRaggingCell('Aman Khan','Member','abc@gmail.com','123545894', org:'MTECH'),
                AntiRaggingCell('Wasim Khan','President','abc@gmail.com','123545894'),
                AntiRaggingCell('Afzal Khan','Member','abc@gmail.com','123545894'),
                AntiRaggingCell('Arman Khan','Member','abc@gmail.com','123545894'),
                AntiRaggingCell('Kalam Khan','Member','abc@gmail.com','123545894'),
              ],
            );

如果您需要更多这样的字段，只需将它们放入 angular 括号中即可。

Answer 3

我找到了答案。只需要声明构造函数并调用它。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

final Color antiRaggingCellBorderColor = Color(0xFFE6E6E6);
final Color chipBackgroundColor = Color(0xFFF6F6F6);

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Squad',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('Anti-Ragging Squad'),
      ),
      body: SafeArea(
        child: ListView.builder(
          itemBuilder: (context, index) {
            return Column(
              children: <Widget>[
                AntiRaggingCell(name: 'Maruf Hassan', position: 'Chairman',email: 'maruf@gmail.com',phone: '012354695425', dept: 'Mathematics & Statistics',),
                AntiRaggingCell(),
              ],
            );
          },
          shrinkWrap: true,
          itemCount: 1,
          physics: ClampingScrollPhysics(),
        ),
      ),
      );
  }
}

class AntiRaggingCell extends StatelessWidget {

  final String name;
  final String position;
  final String email;
  final String phone;
  final String dept;

  AntiRaggingCell({this.name, this.position, this.email, this.phone, this.dept});

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(
                Radius.circular(10.0),
              ),
              border: Border.all(color: Colors.black),
            ),
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Center(
                    child: Wrap(
                      alignment: WrapAlignment.spaceEvenly,
                      spacing: 8.0,
                      children: <Widget>[
                        AntiRaggingDetailChip(Icons.person, name),
                        AntiRaggingDetailChip(Icons.label, position),
                        AntiRaggingDetailChip(Icons.mail, email),
                        AntiRaggingDetailChip(Icons.phone, phone),
                        Center(child: AntiRaggingDetailChip(Icons.account_balance, dept),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}

class AntiRaggingDetailChip extends StatelessWidget {
  final IconData iconData;
  final String label;

  AntiRaggingDetailChip(this.iconData, this.label);

  @override
  Widget build(BuildContext context) {
    return RawChip(
      label: Text(label),
      labelStyle: TextStyle(color: Colors.black, fontSize: 14.0),
      backgroundColor: chipBackgroundColor,
      avatar: Icon(iconData),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.all(
          Radius.circular(10.0),
        ),
      ),
    );
  }
}

如何在 Flutter 中使用 Constructor class 添加多个字符串

How to add multiple String using Constructor class in Flutter

flutter

flutter-widget