Flutter web:如何以步进形式进行水平滚动?
Posted
技术标签:
【中文标题】Flutter web:如何以步进形式进行水平滚动?【英文标题】:Flutter web: How to make horizontal scroll in stepper form? 【发布时间】:2021-08-05 12:34:03 【问题描述】:我正在尝试使用步进器制作一个颤动的网络表单,并且我正在为小尺寸屏幕做实验。我已经使用物理:ClampingScrollPhysics() 方法完成了垂直滚动。但是,我无法在步进步骤中进行水平滚动。我想让单选按钮水平滚动,以便隐藏错误消息并且文本离开屏幕,用户可以滚动到该部分。我已经使用 SingleChildCcrollView(crollDirection: Axis.horizontal) 但它没有用。图片是
flutter程序的代码如下:-
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget
@override
Widget build(BuildContext context)
return new MaterialApp(
title: 'Flutter Stepper Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Stepper Tutorial'),
);
class MyHomePage extends StatefulWidget
MyHomePage(Key key, this.title) : super(key: key);
final String title;
@override
_MyHomePageState createState() => new _MyHomePageState();
class _MyHomePageState extends State<MyHomePage>
int _currentStep = 0;
TextEditingController nameController = TextEditingController();
TextEditingController emailController = TextEditingController();
TextEditingController addressController = TextEditingController();
List<String> demoList = [];
@override
Widget build(BuildContext context)
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
),
Expanded(
child: SingleChildScrollView(
// scrollDirection: Axis.horizontal,
child: Stepper(
physics: ClampingScrollPhysics(),
steps: _mySteps(),
currentStep: this._currentStep,
onStepTapped: (step)
setState(
()
this._currentStep = step;
,
);
,
onStepContinue: ()
setState(
()
if (this._currentStep < this._mySteps().length - 1)
this._currentStep = this._currentStep + 1;
,
);
,
onStepCancel: ()
setState(
()
if (this._currentStep > 0)
this._currentStep = this._currentStep - 1;
else
this._currentStep = 0;
,
);
,
),
),
),
demoList.isEmpty
? Text("")
: Column(
children: demoList.map((e)
return Text(e);
).toList(),
),
ElevatedButton(
onPressed: ()
demoList = [];
viewList();
,
child: Text("Click to see List"),
),
],
),
);
viewList()
if (nameController.text.isEmpty ||
emailController.text.isEmpty ||
addressController.text.isEmpty)
setState(
()
if (nameController.text.isEmpty)
demoList.add("Name field is empty");
else if (emailController.text.isEmpty)
demoList.add("Email field is Empty");
else if (addressController.text.isEmpty)
demoList.add("Address field is empty");
,
);
else
demoList.add(nameController.text);
demoList.add(emailController.text);
demoList.add(addressController.text);
setState(
()
demoList = demoList;
,
);
List<Step> _mySteps()
List<Step> _steps = [
Step(
title: Text('Name'),
content: TextField(
controller: nameController,
),
isActive: _currentStep >= 0,
),
Step(
title: Text('Email'),
content: TextField(
controller: emailController,
),
isActive: _currentStep >= 1,
),
Step(
title: Text('Address'),
content: TextField(
controller: addressController,
),
isActive: _currentStep >= 2,
),
Step(
title: Text('Number'),
content: Row(
children: <Widget>[
SingleChildScrollView(
physics: ClampingScrollPhysics(),
),
SafeArea(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Form(
child: Row(
children: <Widget>[
Radio(
value: "1",
),
Text("1"),
Radio(
value: "2",
),
Text("2"),
Radio(
value: "3",
),
Text("3"),
Radio(
value: "4",
),
Text("4"),
Radio(
value: "5",
),
Text("5"),
Radio(
value: "6",
),
Text("6"),
Radio(
value: "7",
),
Text("7"),
Radio(
value: "8",
),
Text("8"),
Radio(
value: "9",
),
Text("9"),
],
),
),
),
)
],
),
isActive: _currentStep >= 2,
),
];
return _steps;
【问题讨论】:
【参考方案1】:您可以只使用ListView
并将scrollDirection
设置为水平。 Container
之所以存在是因为它需要一些东西来给它一个大小。
Step(
title: Text('Number'),
content: Container(
height: 100,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
Radio(
value: "1",
),
Center(child: Text("1")),
Radio(
value: "2",
),
Center(child: Text("1")),
Radio(
value: "3",
),
Center(child: Text("3")),
Radio(
value: "4",
),
Center(child: Text("4")),
Radio(
value: "5",
),
Center(child: Text("5")),
Radio(
value: "6",
),
Center(child: Text("6")),
Radio(
value: "7",
),
Center(child: Text("7")),
Radio(
value: "8",
),
Center(child: Text("8")),
Radio(
value: "9",
),
Center(child: Text("9")),
],
),
),
isActive: _currentStep >= 2,
),
【讨论】:
以上是关于Flutter web:如何以步进形式进行水平滚动?的主要内容,如果未能解决你的问题,请参考以下文章