如何在颤动中将文本+图标作为步进器的步骤标题

Posted 2023-02-23

【中文标题】如何在颤动中将文本+图标作为步进器的步骤标题

【英文标题】：How to put text + icon as stepper's step title in flutter

【发布时间】：2020-08-24 20:40:40

【问题描述】：

我是 Flutter 的新手。我想在步进器的步骤中放置带有标题文本的图标。所以，任何人都知道如何实现这一点，请告诉我。提前致谢

注意：我不想更改步骤编号中显示的图标，但我想在标题文本之后添加另一个图标。

import 'package:flutter/material.dart';

class CreateProject extends StatefulWidget 
  CreateProject(Key key) : super(key: key);

  @override
  _CreateProjectState createState() => _CreateProjectState();


class _CreateProjectState extends State<CreateProject> 

  @override
  Widget build(BuildContext context) 
    return Stepper(
    currentStep: 3,
    controlsBuilder: (BuildContext context, VoidCallback onStepContinue, VoidCallback onStepCancel) 
    return Row(
        children: <Widget>[
            Container(
                child: null,
            ),
            Container(
                child: null,
            ),
        ],
    );
,

    steps: const <Step>[
      Step(
        title: Text('Step 1'), //here, I want to put one icon with the title text 
        content: SizedBox(
          width: 0.0,
          height: 0.0,
        ),
      ),
      Step(
        title: Text('Step 2'),
        content: SizedBox(
          width: 0.0,
          height: 0.0,
        ),
      ),
      Step(
        title: Text('Step 3'),
        content: SizedBox(
          width: 0.0,
          height: 0.0,
        ),
      ),
      Step(
        title: Text('Step 4'),
        content: SizedBox(
          width: 0.0,
          height: 0.0,
        ),
      ),
    ],
  );

  

我尝试用 Row 小部件包装 Text 小部件，但不起作用。

【参考方案1】：

您不能使用Row，因为构造函数不是常量构造函数。 step 小部件的 title 属性需要一个 const 构造函数。

我做了你想做的，检查下面的代码和输出。

试试下面的代码，效果很好：

Stepper(
      currentStep: 3,
      controlsBuilder: (BuildContext context,
          VoidCallback onStepContinue, VoidCallback onStepCancel) 
        return Row(
          children: <Widget>[
            Container(
              child: null,
            ),
            Container(
              child: null,
            ),
          ],
        );
      ,
      steps: const <Step>[
        Step(
          title: SizedBox(
            width: 50,
            child: ListTile(
              contentPadding: EdgeInsets.zero,
              leading: Text('Step 1'),
              title: Padding(
                padding: const EdgeInsets.only(bottom: 8.0),
                child: Icon(
                  Icons.person,
                  size: 18,
                ),
              ),
            ),
          ),
          content: SizedBox(
            width: 0.0,
            height: 0.0,
          ),
        ),
        Step(
          title: SizedBox(
            width: 50,
            child: ListTile(
              contentPadding: EdgeInsets.zero,
              leading: Text('Step 2'),
              title: Padding(
                padding: const EdgeInsets.only(bottom: 8.0),
                child: Icon(
                  Icons.person,
                  size: 18,
                ),
              ),
            ),
          ),
          content: SizedBox(
            width: 0.0,
            height: 0.0,
          ),
        ),
        Step(
          title: SizedBox(
            width: 50,
            child: ListTile(
              contentPadding: EdgeInsets.zero,
              leading: Text('Step 3'),
              title: Padding(
                padding: const EdgeInsets.only(bottom: 8.0),
                child: Icon(
                  Icons.person,
                  size: 18,
                ),
              ),
            ),
          ),
          content: SizedBox(
            width: 0.0,
            height: 0.0,
          ),
        ),
        Step(
          title: SizedBox(
            width: 50,
            child: ListTile(
              contentPadding: EdgeInsets.zero,
              leading: Text('Step 4'),
              title: Padding(
                padding: const EdgeInsets.only(bottom: 8.0),
                child: Icon(
                  Icons.person,
                  size: 18,
                ),
              ),
            ),
          ),
          content: SizedBox(
            width: 0.0,
            height: 0.0,
          ),
        ),
      ],
    );

输出：