是否有任何方法来改变文本标签的继续和取消按钮的步进器在扑?步进器似乎是完美的选择,我想做什么(长形式与几个“阶段”),在我去尝试建立一个从头开始只是为了获得其他标签的按钮,我想我可能会问。有谁知道这是可能的吗?
093gszye1#
是的,你可以通过提供一个controlsBuilder回调函数。它必须是一个接受另外两个函数(onStepContinue和onStepCancel)的函数,这两个函数是你必须传递给你将要创建的新按钮的操作,以便它们能够正常工作。然后你可以声明任何你想要的东西(在这个例子中是一行两个按钮),只要你传递两个函数(onStepContinue和onStepCancel),让它们按预期工作:
controlsBuilder
onStepContinue
onStepCancel
Stepper( controlsBuilder: (BuildContext context, {VoidCallback? onStepContinue, VoidCallback? onStepCancel}) { return Row( children: <Widget>[ TextButton( onPressed: onStepContinue, child: const Text('NEXT'), ), TextButton( onPressed: onStepCancel, child: const Text('EXIT'), ), ], ); }, steps: const <Step>[ Step( title: Text('A'), content: SizedBox( width: 100.0, height: 100.0, ), ), Step( title: Text('B'), content: SizedBox( width: 100.0, height: 100.0, ), ), ], );
ix0qys7i2#
flutter 2.8.1版里面的Stepper你可以用controlsBuilder你可以修改按钮
controlsBuilder: (context,_) { return Row( children: <Widget>[ TextButton( onPressed: (){}, child: const Text('NEXT'), ), TextButton( onPressed: (){}, child: const Text('EXIT'), ), ], ); },
o2g1uqev3#
controlsBuilder: (BuildContext context, ControlsDetails details) { final _isLastStep = _currentStep == _getSteps.length - 1; return Container( margin: const EdgeInsets.only(top: 50), child: Row(children: [ Expanded( child: ElevatedButton( child: Text(_isLastStep ? 'Send' : 'Next'), onPressed: details.onStepContinue)), const SizedBox( width: 12, ), if (_currentStep != 0) Expanded( child: ElevatedButton( child: Text('Back'), onPressed: details.onStepCancel)) ])); },
ars1skjm4#
我迟到的讨论。但我刚刚做了,并认为这是很好的分享。代码是能够控制文本为每一步的代码如下。每一步将有不同的文本,设法做3个步骤。如果超过这一点,代码将是相当混乱。希望它有助于有人谁正在寻找它。
controlsBuilder: (BuildContext context, {VoidCallback onStepContinue, VoidCallback onStepCancel}) { return Row( children: <Widget>[ _activeCurrentStep == 0 ? TextButton( onPressed: onStepContinue, child: const Text('NEXT'), ) : _activeCurrentStep == 1 ? Container( child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ TextButton( onPressed: onStepContinue, child: const Text('NEXT'), ), TextButton( onPressed: onStepCancel, child: const Text('BACK'), ), ], ), ) : _activeCurrentStep >= 2 ? Container( child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ TextButton( onPressed: onStepContinue, child: const Text('SAVE'), ), TextButton( onPressed: onStepCancel, child: const Text('BACK'), ), ], ), ) : TextButton( onPressed: onStepCancel, child: const Text('BACK'), ), ], ); },
w6mmgewl5#
Flutter解决方案版本〉2.8.1
在flutter版本〉2.8.1中,您不能使用此更改标签或按钮:
controlsBuilder: (context, {onStepContinue, onStepCancel}) {...}
使用这个:
controlsBuilder: (context, _) {...}
或者这个:
controlsBuilder: (context, onStepContinue) {...} controlsBuilder: (context, onStepCancel) {...}
这是一个更改标签文本和颜色的完整示例:
Stepper( controlsBuilder: (context, _) { return Row( children: <Widget>[ TextButton( onPressed: () {}, child: const Text( 'NEXT', style: TextStyle(color: Colors.blue), ), ), TextButton( onPressed: () {}, child: const Text( 'EXIT', style: TextStyle(color: Colors.blue), ), ), ], ); }, //Rest of the Stepper code (currentStep, onStepCancel, onStepContinue, steps...) //... )
yftpprvb6#
Flutter以其SDK的不断更新而闻名。为了实现上述任务,这对我来说是有效的。
Stepper( controlsBuilder(BuildContext context, ControlsDetails details) { return Container( margin: const EdgeInsets.only(top: 24), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ OutlinedButton( onPressed: details.onStepCancel, style: OutlinedButton.styleFrom( maximumSize: const Size(0, 48)), child: Text('CANCEL', style: GoogleFonts.poppins( fontSize: 14, fontWeight: FontWeight.w600)),]))}
这与flutter 3.7.9 SDK完美兼容。
6条答案
按热度按时间093gszye1#
是的,你可以通过提供一个
controlsBuilder
回调函数。它必须是一个接受另外两个函数(onStepContinue
和onStepCancel
)的函数,这两个函数是你必须传递给你将要创建的新按钮的操作,以便它们能够正常工作。然后你可以声明任何你想要的东西(在这个例子中是一行两个按钮),只要你传递两个函数(
onStepContinue
和onStepCancel
),让它们按预期工作:ix0qys7i2#
flutter 2.8.1版里面的Stepper你可以用controlsBuilder你可以修改按钮
o2g1uqev3#
ars1skjm4#
我迟到的讨论。但我刚刚做了,并认为这是很好的分享。代码是能够控制文本为每一步的代码如下。每一步将有不同的文本,设法做3个步骤。如果超过这一点,代码将是相当混乱。希望它有助于有人谁正在寻找它。
w6mmgewl5#
Flutter解决方案版本〉2.8.1
在flutter版本〉2.8.1中,您不能使用此更改标签或按钮:
使用这个:
或者这个:
这是一个更改标签文本和颜色的完整示例:
yftpprvb6#
Flutter以其SDK的不断更新而闻名。为了实现上述任务,这对我来说是有效的。
这与flutter 3.7.9 SDK完美兼容。