Question

应该从中渲染文本的地方

import 'package:flutter/material.dart';

class Icons1 extends StatefulWidget {
  const Icons1({
    Key key,
  }) : super(key: key);

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

class _Icons1State extends State<Icons1> {
  List<Icon> icons = [
    Icon(Icons.account_balance, color: Colors.black),
    Icon(Icons.account_balance_wallet, color: Colors.black),
    Icon(Icons.add_shopping_cart, color: Colors.black),
    Icon(Icons.assessment, color: Colors.black),
    //
    Icon(Icons.assignment, color: Colors.black),
    Icon(Icons.beach_access, color: Colors.black),
    Icon(Icons.attach_file, color: Colors.black),
    Icon(Icons.attach_money, color: Colors.black),
    //
    Icon(Icons.business, color: Colors.black),
    Icon(Icons.business_center, color: Colors.black),
    Icon(Icons.credit_card, color: Colors.black),
    Icon(Icons.device_hub, color: Colors.black),
    //

    Icon(Icons.golf_course, color: Colors.black),
    Icon(Icons.local_gas_station, color: Colors.black),
    Icon(Icons.local_grocery_store, color: Colors.black),
    Icon(Icons.import_contacts, color: Colors.black),
    //

    Icon(Icons.insert_chart, color: Colors.black),
    Icon(Icons.label_important, color: Colors.black),
    Icon(Icons.kitchen, color: Colors.black),
    Icon(Icons.local_bar, color: Colors.black),
    //

    Icon(Icons.ac_unit, color: Colors.black),
    Icon(Icons.account_circle, color: Colors.black),
    Icon(Icons.add_alert, color: Colors.black),
    Icon(Icons.add_to_photos, color: Colors.black),

    Icon(Icons.adjust, color: Colors.black),
    Icon(Icons.airplanemode_active, color: Colors.black),
    Icon(Icons.airport_shuttle, color: Colors.black),
    Icon(Icons.bubble_chart, color: Colors.black),
    //

    Icon(Icons.directions_bus, color: Colors.black),
    Icon(Icons.email, color: Colors.black),
    Icon(Icons.radio, color: Colors.black),
    Icon(Icons.audiotrack, color: Colors.black),
  ];

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      mainAxisSpacing: 2,
      crossAxisSpacing: 2,
      physics: BouncingScrollPhysics(),
      crossAxisCount: 4,
      children: icons
          .map(
            (iconData) => GestureDetector(
              child: iconData,
              onTap: () {},
            ),
          )
          .toList(),
    );
  }
}

//were the icon is meant to be displayed

class DisplayingIcon extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        CircleAvatar(
            // child:
            //chosen icon(),

            )
      ],
    );
  }
}

当我单击“ Icons1”脚本中的“查看”网格中的图标时，我希望它显示在DisplayingIcon脚本的“圆头像”中

我尝试用带有onTap的GestureDetector将列表中的每个单独的图标包装起来，使该图标等于局部变量。这没有用。请帮助。我是新来的人

Answer 1

这取决于您要放置所选图像的位置。这是一个与CircleAvatar在同一列中的GridView的示例。然后，您可以简单地将所选的Icon保存在状态的成员变量中：

void main() {
  runApp(MaterialApp(
      title: 'NiklasLehnfeld',
      home: Scaffold(body: Icons1())));
}

class Icons1 extends StatefulWidget {
  const Icons1({
    Key key,
  }) : super(key: key);

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

class _Icons1State extends State<Icons1> {
  List<Icon> icons = [
    Icon(Icons.account_balance, color: Colors.black),
    Icon(Icons.account_balance_wallet, color: Colors.black),
    Icon(Icons.add_shopping_cart, color: Colors.black),
    Icon(Icons.assessment, color: Colors.black),
    //
    Icon(Icons.assignment, color: Colors.black),
    Icon(Icons.beach_access, color: Colors.black),
    Icon(Icons.attach_file, color: Colors.black),
    Icon(Icons.attach_money, color: Colors.black),
    //
    Icon(Icons.business, color: Colors.black),
    Icon(Icons.business_center, color: Colors.black),
    Icon(Icons.credit_card, color: Colors.black),
    Icon(Icons.device_hub, color: Colors.black),
    //

    Icon(Icons.golf_course, color: Colors.black),
    Icon(Icons.local_gas_station, color: Colors.black),
    Icon(Icons.local_grocery_store, color: Colors.black),
    Icon(Icons.import_contacts, color: Colors.black),
    //

    Icon(Icons.insert_chart, color: Colors.black),
    Icon(Icons.label_important, color: Colors.black),
    Icon(Icons.kitchen, color: Colors.black),
    Icon(Icons.local_bar, color: Colors.black),
    //

    Icon(Icons.ac_unit, color: Colors.black),
    Icon(Icons.account_circle, color: Colors.black),
    Icon(Icons.add_alert, color: Colors.black),
    Icon(Icons.add_to_photos, color: Colors.black),

    Icon(Icons.adjust, color: Colors.black),
    Icon(Icons.airplanemode_active, color: Colors.black),
    Icon(Icons.airport_shuttle, color: Colors.black),
    Icon(Icons.bubble_chart, color: Colors.black),
    //

    Icon(Icons.directions_bus, color: Colors.black),
    Icon(Icons.email, color: Colors.black),
    Icon(Icons.radio, color: Colors.black),
    Icon(Icons.audiotrack, color: Colors.black),
  ];

  Icon _chosenIcon;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(child: DisplayingIcon(_chosenIcon)),
        Expanded(
          flex: 10,
          child: GridView.count(
            mainAxisSpacing: 2,
            crossAxisSpacing: 2,
            physics: BouncingScrollPhysics(),
            crossAxisCount: 4,
            children: icons
                .map(
                  (iconData) => GestureDetector(
                    child: iconData,
                    onTap: () => setState(() => this._chosenIcon = iconData),
                  ),
                )
                .toList(),
          ),
        ),
      ],
    );
  }
}

class DisplayingIcon extends StatelessWidget {
  final Icon icon;

  DisplayingIcon(this.icon);

  @override
  Widget build(BuildContext context) {
    return CircleAvatar(child: this.icon);
  }
}

如果不清楚，请随时询问。

更改用户个人资料图标

1 个答案: