如何在图标下制作带有文本的切换按钮

Question

我有点难以接受这个想法。

目标是让一排切换图标的文本可以溢出到第二行。

ToggleButtons 遇到的问题是我似乎无法在每个图标下方放置文本。

我目前有一个Map<String, Icon>，其中的字符串是该地图图标下方我想要的文本。

有没有简单/可行的方法来做到这一点？

Answer 1

我编辑了从另一个问题修改另一个答案代码以使用我的地图

import 'package:flutter/material.dart';

class WrapToggleIconButtons extends StatefulWidget {
  const WrapToggleIconButtons({
    @required this.symptomIconDataMap,
    @required this.isSelected,
    @required this.onPressed,
  });

  final Map<String, IconData> symptomIconDataMap;
  final List<bool> isSelected;
  final Function onPressed;

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

class _WrapToggleIconButtonsState extends State<WrapToggleIconButtons> {
  int index;

  @override
  Widget build(BuildContext context) {
    final List<String> symptomsList = widget.symptomIconDataMap.keys.toList();
    assert(symptomsList.length == widget.isSelected.length);
    index = -1;
    return Wrap(
      children: symptomsList.map((String symptom) {
        index++;
        return IconToggleButton(
          active: widget.isSelected[index],
          iconData: widget.symptomIconDataMap[symptom],
          text: symptom,
          onTap: widget.onPressed,
          index: index,
        );
      }).toList(),
    );
  }
}

class IconToggleButton extends StatelessWidget {
  const IconToggleButton({
    @required this.active,
    @required this.iconData,
    @required this.text,
    @required this.onTap,
    @required this.index,
    this.width,
    this.height,
  });

  final bool active;
  final IconData iconData;
  final String text;
  final Function onTap;
  final double width;
  final double height;
  final int index;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 80.0,
      height: height ?? 60.0,
      child: Column(
        children: [
          InkWell(
            child: Icon(
              iconData,
              color: active ? Theme.of(context).accentColor : Theme.of(context).disabledColor,
            ),
            onTap: () => onTap(index),
          ),
          Wrap(
            direction: Axis.horizontal,
            children: [
              Text(
                text,
                textAlign: TextAlign.center,
              ),
            ],
          )
        ],
      ),
    );
  }
}

Flutter: Is there a widget to flex toggle buttons

Answer 2

请参阅以下代码以将文本放在 ToggleButton 中的图标下。

import 'package:flutter/material.dart';

final Color darkBlue = const Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  Map<String, dynamic> map = {
    "one": Icons.ac_unit,
    "two": Icons.baby_changing_station,
    "three": Icons.cached,
    "four": Icons.dangerous,
    "five": Icons.east,
    "six": Icons.face,
  };
  List<bool> _isSelected = [];

  @override
  void initState() {
    super.initState();
    _isSelected = List.filled(map.length, false);
  }

  @override
  Widget build(BuildContext context) {
    return Wrap(
      children: [
        ToggleButtons(
          isSelected: _isSelected,
          children: [
            ...map.entries.map((ele) {
              return Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(ele.value),
                  Text(ele.key),
                ],
              );
            }).toList(),
          ],
          selectedColor: Colors.blueGrey,
          onPressed: (value) {
            setState(() {
              _isSelected = List.filled(map.length, false);
              _isSelected[value] = true;
            });
          },
        ),
      ],
    );
  }
}

Answer 3

是的，您可以通过使用 Column 小部件来实现这一点。

return Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Icon(Icons.access_alarm),
    SizedBox(height: 5.0,),
    Text("Text"),
  ],
);