Flutter步进器标题不在行之间的工作空间中

问题描述 投票:0回答:1

我在我的项目中使用步进器。在行中使用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(),
     )

   ],),

  );
}

enter image description here

flutter flutter-layout
1个回答
0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.