Question

我在我的项目中使用步进器。在行中使用spaceBetween概念。它适用于普通的小部件。但是对于步进标题，它不起作用。请检查我的代码，让我知道为什么它不起作用。我都给了两个样品。就像普通的（带有图标的测试）和步进标题（带有图标的测试标题）一样。

   import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(Verifi());

class Verifi extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return VerificationPaymentStates();
  }
}

class VerificationPaymentStates extends State<Verifi> {
  int _index=0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hello'),
      ),
      body: _builderStep(),
    );
  }
  Widget _builderStep() => Container(
   child: new Column(children: <Widget>[
     Row(
         mainAxisAlignment:
         MainAxisAlignment
             .spaceBetween,
         children: [
           new Container(
               child: new Text(
                   "Testing",
                   style: TextStyle(
                       fontSize: 16,
                       fontWeight:
                       FontWeight
                           .normal))),
           SizedBox(width: 10),
           ClipRRect(
             borderRadius:
             BorderRadius
                 .circular(50),
             child: Material(
               child: InkWell(
                 child: Padding(
                   padding:
                   const EdgeInsets
                       .all(5),
                   child:Icon(
                     Icons.edit,
                     size: 20,
                   ),
                 ),
                 onTap: () {
                   setState(() {

                   });
                 },
               ),
             ),
           )
         ]),
     Stepper(
       steps: [
         Step(
           title:                             GestureDetector(
               onTap: () {
                 setState(() {
                 });
               },
               child:
               Row(
                   mainAxisAlignment:
                   MainAxisAlignment
                       .spaceBetween,
                   children: [
                     new Container(
                         child: new Text(
                             "Testing Title",
                             style: TextStyle(
                                 fontSize: 16,
                                 fontWeight:
                                 FontWeight
                                     .normal))),
                     SizedBox(width: 10),
                     ClipRRect(
                       borderRadius:
                       BorderRadius
                           .circular(50),
                       child: Material(
                         child: InkWell(
                           child: Padding(
                             padding:
                             const EdgeInsets
                                 .all(5),
                             child:Icon(
                               Icons.edit,
                               size: 20,
                             ),
                           ),
                           onTap: () {
                             setState(() {

                             });
                           },
                         ),
                       ),
                     )
                   ])
           ),
           content: Text("This is our first example."),
         ),
         Step(
           title: Text("Second"),
           content: Text("This is our second example."),
         ),
         Step(
           title: Text("Third"),
           content: Text("This is our third example."),
         ),
         Step(
           title: Text("Forth"),
           content: Text("This is our forth example."),
         ),
       ],
       currentStep: _index,
       onStepTapped: (index) {
         setState(() {
           _index = index;
         });
       },
       controlsBuilder: (BuildContext context,
           {VoidCallback onStepContinue, VoidCallback onStepCancel}) =>
           Container(),
     )

   ],),

  );
}

Answer 1

它实际上正在工作，但是您面临的问题是Stepper的标题宽度为min。您可以在其源代码中对其进行检查。解决的唯一方法是创建自己的步进器。

Answer 2

首先，您不需要使用诸如GestureDetector和SizedBox之类的东西，我已将其删除。然后将Row用SizedBox包装，其大小是屏幕尺寸减去标题填充（84）。这是您的代码；导入'package：flutter / material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Verifi(),
    ),
  );
}


class Verifi extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => VerificationPaymentStates();
}

class VerificationPaymentStates extends State<Verifi> {
  int _index = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hello'),
      ),
      body: _builderStep(),
    );
  }

  Widget _builderStep() => Container(
        child: Column(
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  child: Text(
                    "Testing",
                    style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.normal,
                    ),
                  ),
                ),
                SizedBox(width: 10),
                ClipRRect(
                  borderRadius: BorderRadius.circular(50),
                  child: Material(
                    child: InkWell(
                      child: Padding(
                        padding: const EdgeInsets.all(5),
                        child: Icon(
                          Icons.edit,
                          size: 20,
                        ),
                      ),
                      onTap: () {
                        setState(() {});
                      },
                    ),
                  ),
                )
              ],
            ),
            Stepper(
              steps: [
                Step(
                  title: SizedBox(
                    width: MediaQuery.of(context).size.width - 84,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Container(
                          child: Text(
                            "Testing Title",
                            style: TextStyle(
                              fontSize: 16,
                              fontWeight: FontWeight.normal,
                            ),
                          ),
                        ),
                        SizedBox(width: 10),
                        ClipRRect(
                          borderRadius: BorderRadius.circular(50),
                          child: Material(
                            child: InkWell(
                              child: Padding(
                                padding: const EdgeInsets.all(5),
                                child: Icon(
                                  Icons.edit,
                                  size: 20,
                                ),
                              ),
                              onTap: () {
                                setState(() {});
                              },
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  content: Text("This is our first example."),
                ),
                Step(
                  title: Text("Second"),
                  content: Text("This is our second example."),
                ),
                Step(
                  title: Text("Third"),
                  content: Text("This is our third example."),
                ),
                Step(
                  title: Text("Forth"),
                  content: Text("This is our forth example."),
                ),
              ],
              currentStep: _index,
              onStepTapped: (index) {
                setState(() {
                  _index = index;
                });
              },
              controlsBuilder: (BuildContext context,
                      {VoidCallback onStepContinue,
                      VoidCallback onStepCancel}) =>
                  Container(),
            )
          ],
        ),
      );
}

这是现场演示； https://codepen.io/malibayram91/pen/dyYjRqM

颤振的步进标题不起作用，行之间

2 个答案: