0

在此屏幕截图中,卡周围有空间,我尝试了很多方法,但无法将其删除,请大家帮忙。

在此处输入图像描述

这是我的代码

class StepOneView extends StatefulWidget {
  StepOneView({Key key}) : super(key: key);

  @override
  _StepOneViewState createState() => _StepOneViewState();
}

class _StepOneViewState extends State<StepOneView>{
  final textControllerRate = TextEditingController(),
      textControllerVolume = TextEditingController();

  @override
  Widget build(BuildContext context) {

    //var size = MediaQuery.of(context).size.width*1;

    final bloc = BlocProvider.of<StepperBloc>(context);
    return BlocBuilder(
        bloc: bloc,
        builder: (BuildContext context, StepperState state) {
          textControllerRate.text = (state.rate != null) ? state.rate.toString() : textControllerRate.text;
          textControllerVolume.text = (state.volume != null) ? state.volume.toString() : textControllerVolume.text;
          return Container(
            child: Card(
              child: Column(
                children: <Widget>[
                  new TextFormField(
                    controller: textControllerRate,
                    decoration: const InputDecoration(labelText: 'Rate'),
                    keyboardType: TextInputType.number,
                  ),
                  new TextFormField(
                    controller: textControllerVolume,
                    decoration: const InputDecoration(labelText: 'Volume'),
                    keyboardType: TextInputType.number,
                  ),

                  new Padding(
                    padding: EdgeInsets.all(8.0),
                    child: RaisedButton(
                      onPressed: () {
                        bloc.onSaveRate(double.parse(textControllerRate.text), double.parse(textControllerVolume.text));
                        bloc.onContinue();
                      },
                      color: Colors.black,
                      textColor: Colors.white,
                      child: Text('Next'),
                    ),
                  )
                ],
              ),
            ),
          );
        }
    );
  }
}

这是调用此类 StepOneView 的代码

return Container(
            child: Stepper(
              controlsBuilder: (BuildContext context, {VoidCallback onStepContinue, VoidCallback onStepCancel}) {
                return Padding(
                    padding: EdgeInsets.only(top: 8.0),
                    child: SizedBox()
                );
              },

              steps: <Step>[
                Step(
                  title: Text("Step 1"),
                  content: new Wrap(
                    children:<Widget>[
                      StepOneView()
                    ],
                  ),
                  isActive: (state.currentStep == 0 ? true : false),
                  state: (state.currentStep >= 1) ? StepState.complete : StepState.indexed,
                ),
                Step(
                  title: Text("Step 2"),
                  content: new Wrap(
                    children:<Widget>[
                      StepTwoView()
                    ],
                  ),
                  isActive: (state.currentStep == 1 ? true : false),
                  state: (state.currentStep >= 2) ? StepState.complete : StepState.indexed,
                ),
                Step(
                  title: Text("Step 3"),
                  content: new Wrap(
                    children:<Widget>[
                      StepTwoView()
                    ],
                  ),
                  isActive: (state.currentStep == 2 ? true : false),
                  state: (state.currentStep >= 3) ? StepState.complete : StepState.indexed,
                ),
              ],
              currentStep: state.currentStep,
              type: StepperType.horizontal,
              onStepTapped: (step) {
                (step <= state.currentStep) ? bloc.onBack() : bloc.onContinue();
              },
              onStepCancel: () {
                bloc.onBack();
              },
              onStepContinue: () {
                bloc.onContinue();
              },
            ),
          );

谁能告诉我我在做什么错误,请我是新手,我无法弄清楚我尝试了所有可能的方法,我知道

4

2 回答 2

4

如果您查看stepper.dart文件内部,您可以看到:

margin: const EdgeInsets.symmetric(horizontal: 24.0)

所以它是Stepper从左右分配空间,修改它的唯一方法是创建自己的步进器版本。

于 2020-06-29T14:54:18.667 回答
0

用小部件包装CardContainer部件并使用边距属性

margin: EdgeInsets.only(left: 10)

或者你可以这样做

margin: EdgeInsets.all(8.0),
于 2022-02-15T03:26:04.477 回答