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

Question

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

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

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 小部件，但不起作用。

标签： flutterflutter-layout

Answer 1

您不能使用 aRow因为构造函数不是常量构造函数。小部件的title属性step需要一个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,
          ),
        ),
      ],
    );

输出：