在Flutter Stepper中更改Continue/Cancel按钮的标签,可以通过自定义Stepper的按钮来实现。Flutter Stepper是一个用于实现步骤指示器的小部件,它包含了两个按钮:Continue和Cancel。
要更改这些按钮的标签,可以通过自定义Stepper的controlsBuilder属性来实现。controlsBuilder属性接受一个回调函数,该函数返回一个包含自定义按钮的小部件。
以下是一个示例代码,演示如何在Flutter Stepper中更改Continue/Cancel按钮的标签:
import 'package:flutter/material.dart';
class MyStepper extends StatefulWidget {
@override
_MyStepperState createState() => _MyStepperState();
}
class _MyStepperState extends State<MyStepper> {
int _currentStep = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Stepper Example'),
),
body: Stepper(
currentStep: _currentStep,
onStepContinue: () {
setState(() {
if (_currentStep < 2) {
_currentStep += 1;
}
});
},
onStepCancel: () {
setState(() {
if (_currentStep > 0) {
_currentStep -= 1;
}
});
},
controlsBuilder: (BuildContext context,
{VoidCallback onStepContinue, VoidCallback onStepCancel}) {
return Row(
children: <Widget>[
RaisedButton(
onPressed: onStepContinue,
child: Text('Next'),
),
SizedBox(width: 10),
FlatButton(
onPressed: onStepCancel,
child: Text('Previous'),
),
],
);
},
steps: [
Step(
title: Text('Step 1'),
content: Text('This is the first step.'),
isActive: _currentStep == 0,
),
Step(
title: Text('Step 2'),
content: Text('This is the second step.'),
isActive: _currentStep == 1,
),
Step(
title: Text('Step 3'),
content: Text('This is the third step.'),
isActive: _currentStep == 2,
),
],
),
);
}
}
void main() {
runApp(MaterialApp(
home: MyStepper(),
));
}
在上面的示例中,我们通过自定义controlsBuilder属性返回一个包含自定义按钮的小部件。在这个例子中,我们使用了RaisedButton和FlatButton来替代默认的Continue和Cancel按钮,并更改了它们的标签为"Next"和"Previous"。
这是一个简单的示例,你可以根据自己的需求进行更多的定制。希望对你有帮助!
领取专属 10元无门槛券
手把手带您无忧上云