1

我制作了两个小部件并在 main.dart 中调用它们。我希望课堂上的AntiRaggingCell小部件HomePage能够获取不同字符串的详细信息，例如姓名、标签、部门、电话号码、联系人和电子邮件。我的代码现在要做的是，我必须把每一个细节都放进去，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'),
              ],
            );
          },
4

3 回答 3

1

只需添加一个带有您想要的参数的构造函数。

这是一个例子

     final name;
  final email;

  const MyApp({Key key, this.name, this.email}) : super(key: key);
于 2020-02-13T06:44:22.030 回答
1 
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'),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}

像这样调用这个类：

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'),
              ],
            );

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

于 2020-02-13T06:52:15.500 回答
0

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

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),
        ),
      ),
    );
  }
}
于 2020-02-13T11:11:40.137 回答