如何在 flutter 中添加文本注释，为其上方的字段提供一些上下文？

Question

在我的 flutter 对话框页面之一中，我有一个带有两个选项的 cupertino 选择器元素：

“单身”和“MCQ”

late QuestionType _questionType = QuestionType.self;
int? _selectedSegment = 0;
Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    SizedBox(
      width: 230,
      child: CupertinoSegmentedControl<int> (
        padding: const EdgeInsets.symmetric(),
        groupValue: _selectedSegment,
        children: const {
          0: Text('Single'),
          1: Text('MCQ')
        },
        onValueChanged: (int? newSelection) {
          setState(() {
            _selectedSegment = newSelection;
            if (_selectedSegment == 0) {
              _questionType = QuestionType.single;
            } else {
              _questionType = QuestionType.mcq;
            }
          });
        },
      ),
    ),
  ],
)

• 单=填空题
• MCQ = 选择题

我可以看到问题类型根据我的选择在选择器中移动

有什么方法可以在突出显示的背景颜色中添加一条小注释，上面写着：“MCQ 需要多个答案，您可以稍后添加” 前任：

有什么方法可以添加一个小提示：“MCQ 需要多个答案，您可以稍后添加”以某种背景颜色。

我尝试使用以下术语在线搜索相同内容：

1. 颤动中的注意事项
2. flutter 中的上下文注释
3. flutter 中的提示文本
4. 颤动中的警报文本

所有结果都包含

Text

以及要添加的信息，我已经知道了。当我添加一个

SizedBox(
            width: double.infinity, // Stretch horizontally
            child: Text(
              'MCQ requires multiple answers which you can add later',
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 12,
                background: Paint()
                  ..color = CupertinoColors.activeGreen.withOpacity(0.7)
                  ..strokeWidth = 20
                  ..strokeJoin = StrokeJoin.round
                  ..strokeCap = StrokeCap.round
                  ..style = PaintingStyle.stroke,
                color: Colors.white,
              ),
            ),
          ),

它看起来很不合适。 我是 Flutter 新手，不知道该功能叫什么。谁能告诉我 Flutter 中是否有可用的功能/API 可以实现？如果没有，还有其他方法吗？如有任何帮助，我们将不胜感激。

Answer 1

您可以将小部件包装在 Tooltip 中，以便在用户长按或悬停在其上时提供附加信息。对于您想要保持 UI 整洁同时仍按需提供有用上下文的情况来说，这是理想的选择。

以下是实现工具提示的方法：

 Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        SizedBox(
          width: 230,
          child: CupertinoSegmentedControl<int>(
            padding: const EdgeInsets.symmetric(),
            groupValue: _selectedSegment,
            children: {
              0: const Text('Single'),
              1: Tooltip(
                message: 'MCQ requires multiple answers which you can add later',
                child: const Text('MCQ'),
              ),
            },
            onValueChanged: (int? newSelection) {
              setState(() {
                _selectedSegment = newSelection;
                if (_selectedSegment == 0) {
                  _questionType = QuestionType.single;
                } else {
                  _questionType = QuestionType.mcq;
                }
              });
            },
          ),
        ),
      ],
    ),
  ],
)

您可以查看@pskink

分享的链接