如何在颤动的可见性上添加滚动
Posted
技术标签:
【中文标题】如何在颤动的可见性上添加滚动【英文标题】：How to add scroll on visibility on flutter 【发布时间】：2021-11-30 16:46:47 【问题描述】：我想让滚动视图可见，但是当我尝试添加 SingleChildScrollView 时它仍然不起作用，结果是这样的
This is the result
我想要的应用程序将运行如下所示
its main purpose is when the DropdownMenuItem is scrolled on the screen it will not be carried away
谢谢，如果我的话有点难以理解，对不起
这是我的代码：
class AddressScreen extends StatefulWidget
@override
State<StatefulWidget> createState() => _AddressState();
class _AddressState extends State<AddressScreen>
String? _detail;
bool _saveButton = false;
String? valueChoose;
List listProvinsi = ['Lampung', 'DKI Jakarta'];
String? valueChoose2;
List listKabupaten = ['Bandar Lampung', 'Jakarta Timur'];
String? valueChoose3;
List listKecamatan = ['Kemiling', 'Cipayung'];
String? valueChoose4;
List listKelurahan = ['Beringin Raya', 'Bambu Apus'];
@override
Widget build(BuildContext context)
return Scaffold(
backgroundColor: Colors.grey[100],
appBar: AppBar(
titleSpacing: 0,
elevation: 10,
backgroundColor: Theme.of(context).primaryColor,
title: Text(
'Alamat',
style: TextStyle(fontSize: 18),
),
actions: [
GestureDetector(
onTap: () =>
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ProfileScreen(),
),
),
,
child: Container(
height: 30,
width: 30,
margin: EdgeInsets.only(
right: 3,
),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Colors.white, width: 1.5),
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage(personImg),
),
),
),
),
GestureDetector(
onTap: () =>
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => HomeScreen(),
),
),
,
child: Container(
margin: EdgeInsets.only(
right: 7,
),
child: Image.asset(iconAppbar),
),
),
],
),
body: SafeArea(
child: Container(
child: Column(
children: <Widget>[
Container(
height: SizeConfig.screenHeight / 4.5,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Color(0x14000000),
offset: Offset(
0,
2,
),
blurRadius: 4,
spreadRadius: 2,
),
],
),
child: Row(
children: [
SizedBox(width: SizeConfig.screenWidth / 17),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 15),
Container(
child: Text(
'Alamat Anda',
style: TextStyle(
color: Colors.grey.shade700,
fontSize: 14,
fontWeight: FontWeight.bold,
),
),
),
Container(
height: SizeConfig.screenHeight / 9,
width: SizeConfig.screenWidth / 2.2,
// color: Colors.grey,
child: Row(
children: [
Expanded(
child: Text(
'Perumahan Berkoh Indah Jl. Brawijaya No. 45 Gg. Mangga Rt.03 Rw.05 Kel. Arcawinangun, Kec. Purwokerto Timur, Kab. Banyumas Jawa Tengah - 53114',
style: TextStyle(
color: Colors.black54,
fontSize: 11,
),
),
),
],
),
)
],
),
SizedBox(width: SizeConfig.screenWidth / 9),
//@arjunalst2020
// ChangeButton(),
InkWell(
onTap: ()
setState(()
_saveButton = !_saveButton;
);
,
child: Container(
margin:
EdgeInsets.only(top: SizeConfig.screenHeight / 8),
height: SizeConfig.screenHeight / 17,
width: SizeConfig.screenWidth / 3,
decoration: _saveButton
? BoxDecoration(
color: Colors.grey.shade700,
borderRadius:
BorderRadius.all(Radius.circular(8)))
: BoxDecoration(
color: Colors.pink.shade800,
borderRadius:
BorderRadius.all(Radius.circular(8))),
child: Center(
child: Text(
_saveButton ? 'Simpan' : 'Ubah',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white),
),
),
),
),
],
),
),
SizedBox(height: 20),
Visibility(
visible: _saveButton,
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 23),
child: Text(
'Provinsi',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black87,
fontSize: 12,
),
),
),
SizedBox(height: 3),
Center(
child: Padding(
padding: const EdgeInsets.only(right: 20, left: 20),
child: Container(
height: SizeConfig.screenHeight / 17,
padding: EdgeInsets.only(right: 10, left: 10),
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.all(
Radius.circular(5),
),
),
child: DropdownButton(
isExpanded: true,
dropdownColor: Colors.white,
value: valueChoose,
iconSize: 25,
underline: SizedBox(),
style: TextStyle(
fontSize: 13,
color: Colors.black54,
fontWeight: FontWeight.bold),
onChanged: (newValue)
setState(()
valueChoose = newValue.toString();
);
,
items: listProvinsi.map((valueItem)
return DropdownMenuItem(
value: valueItem, child: Text(valueItem));
).toList(),
),
),
),
),
SizedBox(height: 30),
Container(
margin: EdgeInsets.only(left: 23),
child: Text(
'Kabupaten/Kota',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black87,
fontSize: 12,
),
),
),
SizedBox(height: 3),
Center(
child: Padding(
padding: const EdgeInsets.only(right: 20, left: 20),
child: Container(
height: SizeConfig.screenHeight / 17,
padding: EdgeInsets.only(right: 10, left: 10),
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.all(
Radius.circular(5),
),
),
child: DropdownButton(
isExpanded: true,
dropdownColor: Colors.white,
value: valueChoose2,
iconSize: 25,
underline: SizedBox(),
style: TextStyle(
fontSize: 13,
color: Colors.black54,
fontWeight: FontWeight.bold),
onChanged: (newValue2)
setState(()
valueChoose2 = newValue2.toString();
);
,
items: listKabupaten.map((valueItem)
return DropdownMenuItem(
value: valueItem, child: Text(valueItem));
).toList(),
),
),
),
),
SizedBox(height: 30),
Container(
margin: EdgeInsets.only(left: 23),
child: Text(
'Kecamatan',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black87,
fontSize: 12,
),
),
),
SizedBox(height: 3),
Center(
child: Padding(
padding: const EdgeInsets.only(right: 20, left: 20),
child: Container(
height: SizeConfig.screenHeight / 17,
padding: EdgeInsets.only(right: 10, left: 10),
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.all(
Radius.circular(5),
),
),
child: DropdownButton(
isExpanded: true,
dropdownColor: Colors.white,
value: valueChoose3,
iconSize: 25,
underline: SizedBox(),
style: TextStyle(
fontSize: 13,
color: Colors.black54,
fontWeight: FontWeight.bold),
onChanged: (newValue3)
setState(()
valueChoose3 = newValue3.toString();
);
,
items: listKecamatan.map((valueItem)
return DropdownMenuItem(
value: valueItem, child: Text(valueItem));
).toList(),
),
),
),
),
SizedBox(height: 30),
Container(
margin: EdgeInsets.only(left: 23),
child: Text(
'Kelurahan',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black87,
fontSize: 12,
),
),
),
SizedBox(height: 3),
Center(
child: Padding(
padding: const EdgeInsets.only(right: 20, left: 20),
child: Container(
height: SizeConfig.screenHeight / 17,
padding: EdgeInsets.only(right: 10, left: 10),
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.all(
Radius.circular(5),
),
),
child: DropdownButton(
isExpanded: true,
dropdownColor: Colors.white,
value: valueChoose4,
iconSize: 25,
underline: SizedBox(),
style: TextStyle(
fontSize: 13,
color: Colors.black54,
fontWeight: FontWeight.bold,
),
onChanged: (newValue4)
setState(()
valueChoose4 = newValue4.toString();
);
,
items: listKelurahan.map((valueItem)
return DropdownMenuItem(
value: valueItem, child: Text(valueItem));
).toList(),
),
),
),
),
SizedBox(height: 30),
Container(
margin: EdgeInsets.only(left: 23),
child: Text(
'Jalan/Gang/Nama Gedung/Nama Perumahan',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black87,
fontSize: 12,
),
),
),
SizedBox(height: 3),
Center(
child: Container(
height: SizeConfig.screenHeight / 17,
width: SizeConfig.screenWidth / 1.12,
child: TextField(
maxLines: 1,
style: TextStyle(fontSize: 12),
onChanged: (value)
setState(()
_detail = value;
);
,
decoration: InputDecoration(
counterText: "",
fillColor: Colors.grey.shade300,
filled: true,
border: OutlineInputBorder(
borderSide: BorderSide.none,
),
),
),
),
),
SizedBox(height: 30),
Container(
margin: EdgeInsets.only(left: 23),
child: Text(
'Unit/Blok/RT/RW',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black87,
fontSize: 12,
),
),
),
SizedBox(height: 3),
Center(
child: Container(
height: SizeConfig.screenHeight / 17,
width: SizeConfig.screenWidth / 1.12,
child: TextField(
maxLines: 1,
style: TextStyle(fontSize: 12),
onChanged: (value)
setState(()
_detail = value;
);
,
decoration: InputDecoration(
fillColor: Colors.grey.shade300,
filled: true,
border: OutlineInputBorder(
borderSide: BorderSide.none,
),
),
),
),
),
SizedBox(height: 30),
Container(
margin: EdgeInsets.only(left: 23),
child: Text(
'Kode Pos',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black87,
fontSize: 12,
),
),
),
SizedBox(height: 3),
Center(
child: Container(
height: SizeConfig.screenHeight / 17,
width: SizeConfig.screenWidth / 1.12,
child: TextField(
keyboardType: TextInputType.number,
maxLines: 1,
maxLength: 8,
style: TextStyle(fontSize: 12),
onChanged: (value)
setState(()
_detail = value;
);
,
decoration: InputDecoration(
fillColor: Colors.grey.shade300,
filled: true,
counterText: "",
border: OutlineInputBorder(
borderSide: BorderSide.none,
),
),
),
),
),
SizedBox(height: 30),
Center(
child: Container(
width: SizeConfig.screenWidth / 1.12,
height: SizeConfig.screenHeight / 10,
decoration: BoxDecoration(
color: Colors.transparent,
border:
Border.all(color: Colors.black38, width: 0.6),
),
child: Row(
children: [
Container(
height: SizeConfig.screenHeight,
width: SizeConfig.screenWidth / 5,
decoration: BoxDecoration(
color: Colors.blueGrey,
),
child: Icon(
Icons.location_on,
color: Colors.white,
size: 35,
),
),
SizedBox(width: SizeConfig.screenWidth / 20),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 10),
Text(
'Tandai Lokasi Peta',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black87,
fontSize: 11,
),
),
Container(
height: SizeConfig.screenHeight / 17,
width: SizeConfig.screenWidth / 1.9,
child: Row(
children: [
Expanded(
child: Text(
'Jl. Brawijaya No,45 Gg. Mangga Kel. Arcawinangun, Kec. Purwokerto Timur, Banyumas',
style: TextStyle(
fontSize: 11,
color: Colors.grey.shade800,
),
),
),
],
),
),
],
),
],
),
),
),
SizedBox(height: 10),
Container(
height: SizeConfig.screenHeight / 20,
width: SizeConfig.screenWidth / 1.6,
margin:
EdgeInsets.only(left: SizeConfig.screenWidth / 3.3),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Text(
'Pastikan lokasi yang Anda tandai di peta sesuai dengan alamat yang Anda isi di atas',
style: TextStyle(
fontSize: 9,
color: Colors.grey.shade800,
),
),
),
],
),
),
SizedBox(height: 30),
],
),
),
),
],
),
),
),
);
如果我的代码还是乱七八糟，或者很多都没有效果，我很抱歉，我只是在学习？？？？
【问题讨论】：
尝试用Expanded包裹SingleChildScrollView
【参考方案1】：
我多次遇到同样的问题。
您需要将 SingleChildScrollView 包装在 Flexible 中。
这是我需要执行的顺序来始终修复：
Flexible(
child: SingleChildScrollView(
child: Form(
key: _formKey,
child: Column(
children:[Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.only(left:10, top: 20, bottom: 20),
child: Text( )
【讨论】：
【参考方案2】：用Expanded 包裹Visibility 小部件。
Expanded(
child: Visibility(
.....
),
),
如果这不起作用，请用SingleChildScrollView 包裹主体Column。
注意：不需要用 Container 包裹主要的 Column。
【讨论】：
嘿兄弟 thx 的建议，它的工作 ??，我被困了 2 周大声笑 不客气。考虑将其标记为已接受。以上是关于如何在颤动的可见性上添加滚动的主要内容，如果未能解决你的问题，请参考以下文章
当列表视图的项目在颤动的视口中可见时，如何更改项目颜色并执行一些操作？