如何修复小部件的位置，使其在颤振中滚动时不移动
How to fix a widget's position to not move while scrolling in flutter
我制作了一个自定义抽屉 ui，但我想要其中的用户详细信息部分并且注销按钮不应滚动。我已经使用了 positioned 但它给出了不正确的父用法并且在每个单独的小部件上分别堆栈它不起作用我如何实现静态 ui 位置我不想让用户详细信息和注销按钮移动以及滚动条，而且我不想在不同的屏幕尺寸上失去响应能力。
import 'package:avunja/commons/colors.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'onlinebutton.dart';
class InkWellDrawer extends StatefulWidget {
@override
_InkWellDrawerState createState() => _InkWellDrawerState();
}
class _InkWellDrawerState extends State<InkWellDrawer> {
bool _enable = false;
@override
Widget build(BuildContext ctxt) {
return Drawer(
child: Container(
color: Color(ReddishColor),
child: ListView(
children: <Widget>[
Container(
child: Column(
children: <Widget>[
SizedBox(
height: 10,
),
Padding(
padding: EdgeInsets.only(),
child: Container(
height: 80,
color: Color(0xFFBB0218),
child: Stack(
children: <Widget>[
Positioned(
child: Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: EdgeInsets.only(left: 20),
child: CircleAvatar(
radius: 30.0,
backgroundImage:
AssetImage("assets/girl.png"),
backgroundColor: Colors.white,
),
),
),
),
Positioned(
child: Align(
alignment: Alignment.centerLeft,
child: Padding(
padding:
EdgeInsets.only(left: 90, bottom: 40),
child: Text(
"Angela Moury",
style: TextStyle(
fontWeight: FontWeight.w500,
color: Colors.white,
fontSize: 16),
)),
),
),
Positioned(
child: Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: EdgeInsets.only(left: 90, top: 5),
child: Text(
"(254)7XX XX5 555",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w500,
fontSize: 14),
)),
),
),
Positioned(
child: Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: EdgeInsets.only(left: 90, top: 45),
child: Text("carrie.m@avunja.com",
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 14,
color: Colors.white)),
),
),
),
],
),
)),
Padding(
padding: EdgeInsets.only(left: 20, right: 20, top: 5),
child: Container(
child: Image.asset("assets/dividinglinedrawer.png"),
),
),
SizedBox(
height: 10,
),
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(),
child: ListTile(
leading: Image.asset('assets/power.png'),
title: Text(
'Online Status',
style: TextStyle(fontSize: 14, color: Colors.white),
),
trailing: CustomSwitch(
value: _enable,
onChanged: (bool val) {
setState(() {
_enable = val;
});
},
),
onTap: () {},
),
),
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(),
child: ListTile(
leading: Image.asset('assets/house.png'),
title: Text(
'Home',
style: TextStyle(
fontSize: 14, color: Colors.white),
),
onTap: () {},
),
),
],
),
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(),
child: ListTile(
leading: Image.asset('assets/mail.png'),
title: Text(
'Inbox',
style: TextStyle(
fontSize: 14, color: Colors.white),
),
onTap: () {},
),
),
],
),
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(),
child: ListTile(
leading: Image.asset('assets/notification.png'),
title: Text(
'Notifications',
style: TextStyle(
fontSize: 14, color: Colors.white),
),
onTap: () {},
),
),
],
),
SizedBox(
height: 5,
),
Padding(
padding: EdgeInsets.only(left: 20, right: 20, top: 5),
child: Container(
child: Image.asset("assets/dividinglinedrawer.png"),
),
),
SizedBox(
height: 5,
),
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(),
child: ListTile(
leading: Image.asset('assets/account.png'),
title: Text(
'Account',
style: TextStyle(
fontSize: 14, color: Colors.white),
),
onTap: () {},
),
),
],
),
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(),
child: ListTile(
leading: Image.asset('assets/payment.png'),
title: Text(
'Payment',
style: TextStyle(
fontSize: 14, color: Colors.white),
),
onTap: () {},
),
),
],
),
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(),
child: ListTile(
leading: Image.asset('assets/topup.png'),
title: Text(
'Topup',
style: TextStyle(
fontSize: 14, color: Colors.white),
),
onTap: () {},
),
),
],
),
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(),
child: ListTile(
leading: Image.asset('assets/withdraw.png'),
title: Text(
'Withdraw',
style: TextStyle(
fontSize: 14, color: Colors.white),
),
onTap: () {},
),
),
],
),
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(),
child: ListTile(
leading: Image.asset('assets/bills.png'),
title: Text(
'Bills & Utilities',
style: TextStyle(
fontSize: 14, color: Colors.white),
),
onTap: () {},
),
),
],
),
SizedBox(
height: 5,
),
Padding(
padding: EdgeInsets.only(left: 20, right: 20, top: 5),
child: Container(
child: Image.asset("assets/dividinglinedrawer.png"),
),
),
SizedBox(
height: 5,
),
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(),
child: ListTile(
leading: Image.asset('assets/reports.png'),
title: Text(
'Reports',
style: TextStyle(
fontSize: 14, color: Colors.white),
),
onTap: () {},
),
),
],
),
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(),
child: ListTile(
leading: Image.asset('assets/transactions.png'),
title: Text(
'Transactions',
style: TextStyle(
fontSize: 14, color: Colors.white),
),
onTap: () {},
),
),
],
),
SizedBox(
height: 5,
),
Padding(
padding: EdgeInsets.only(left: 20, right: 20, top: 5),
child: Container(
child: Image.asset("assets/dividinglinedrawer.png"),
),
),
SizedBox(
height: 5,
),
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(),
child: ListTile(
leading: Image.asset('assets/reward.png'),
title: Text(
'Rewards & Promotions',
style: TextStyle(
fontSize: 14, color: Colors.white),
),
onTap: () {},
),
),
],
),
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(),
child: ListTile(
leading: Image.asset('assets/refer.png'),
title: Text(
'Refer',
style: TextStyle(
fontSize: 14, color: Colors.white),
),
onTap: () {},
),
),
],
),
SizedBox(
height: 5,
),
Padding(
padding: EdgeInsets.only(left: 20, right: 20, top: 5),
child: Container(
child: Image.asset("assets/dividinglinedrawer.png"),
),
),
SizedBox(
height: 5,
),
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(),
child: ListTile(
leading: Image.asset('assets/support.png'),
title: Text(
'Support',
style: TextStyle(
fontSize: 14, color: Colors.white),
),
onTap: () {},
),
),
],
),
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(),
child: ListTile(
leading: Image.asset('assets/settings.png'),
title: Text(
'Settings',
style: TextStyle(
fontSize: 14, color: Colors.white),
),
onTap: () {},
),
),
],
),
],
),
SizedBox(
height: 5,
),
Padding(
padding: EdgeInsets.only(left: 20, right: 20, top: 5),
child: Container(
child: Image.asset("assets/dividinglinedrawer.png"),
),
),
SizedBox(
height: 15,
),
Padding(
padding: EdgeInsets.only(),
child: Container(
height: 60,
color: Color(0xFFBB0218),
child: Padding(
padding: EdgeInsets.only(),
child: ListTile(
leading: Image.asset('assets/logout.png'),
title: Text(
'Logout',
style:
TextStyle(fontSize: 14, color: Colors.white),
),
onTap: () {},
),
),
)),
SizedBox(
height: 50,
child: Container(
height: 50,
),
)
],
),
),
],
),
),
);
}
}
只需在要滚动的代码部分添加 - “ListView”，在不想滚动的“ListView”部分添加 - “physics: NeverScrollablePhysics()”
您可以使用两个 ListView 小部件来解决这个问题。
第一个 ListView，我们可以使用它的父 ListView 物理作为 NeverScrollableScrollPhysics() 然后你可以在里面使用 另一个 ListView父列表视图。然后您可以在父 ListView 中滚动子 ListView。
此外，您可以使用下面的示例。
ListView( //Parent ListView with physics as NeverScrollableScrollPhysics()
physics: NeverScrollableScrollPhysics(),
shrinkWrap : true,
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Container(alignment: Alignment.center, child: CircleAvatar(child: Icon(Icons.person, color: Colors.purple), backgroundColor: Colors.white)),
),
ListView( // scroll child ListView Widget
shrinkWrap : true,
children: [
GestureDetector(
child: getDrawerItem(Icons.person, 'Profile'),
onTap: () {},
),
GestureDetector(
child: getDrawerItem(Icons.history, 'History'),
onTap: () {},
),
GestureDetector(
child: getDrawerItem(Icons.data_usage, 'Performance'),
onTap: () {},
),
GestureDetector(
child: getDrawerItem(Icons.beach_access, 'Environments'),
onTap: () {},
),
],
),
Divider(),
GestureDetector(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: Container(
child: Text(
'Log Out',
style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 18.0, color: Color(0xFF251756)),
textAlign: TextAlign.center,
)),
),
),
onTap: () {},
)
],
);
希望这个回答能解决您的问题！
我不确定我是否完全理解您不想滚动的部分，但如果它是 AppBar()，那么请考虑使用 CustomScrollView()（在此处阅读更多内容：https://api.flutter.dev/flutter/widgets/CustomScrollView-class.html). In the slivers parameter you can then put a SliverAppBar() (read more here: https://api.flutter.dev/flutter/material/SliverAppBar-class.html) which you can pin to the screen or have it change when the user scrolls while staying on scroll or have it scroll with the screen. Underneath, you would then add your a SliverList() (read more here: https://api.flutter.dev/flutter/widgets/SliverList-class.html） ListView().
如果这不是您要查找的内容，请使用当前 UI 和所需 UI.
的屏幕截图更新您的 post
建议你把抽屉做成屏风。将它的右侧完全设为白色，这样它就可以作为一个抽屉并像普通屏幕一样放置。堆叠列表视图，然后 physics: NeverScrollableScrollPhysics(), 将按预期工作。
使用自定义屏幕还有许多其他选项，因此您将拥有正确的东西，但会稍微妥协实际抽屉在屏幕上的模糊度，您也可以覆盖它，但它太复杂了，我想你可以试试。
我制作了一个自定义抽屉 ui，但我想要其中的用户详细信息部分并且注销按钮不应滚动。我已经使用了 positioned 但它给出了不正确的父用法并且在每个单独的小部件上分别堆栈它不起作用我如何实现静态 ui 位置我不想让用户详细信息和注销按钮移动以及滚动条，而且我不想在不同的屏幕尺寸上失去响应能力。
import 'package:avunja/commons/colors.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'onlinebutton.dart';
class InkWellDrawer extends StatefulWidget {
@override
_InkWellDrawerState createState() => _InkWellDrawerState();
}
class _InkWellDrawerState extends State<InkWellDrawer> {
bool _enable = false;
@override
Widget build(BuildContext ctxt) {
return Drawer(
child: Container(
color: Color(ReddishColor),
child: ListView(
children: <Widget>[
Container(
child: Column(
children: <Widget>[
SizedBox(
height: 10,
),
Padding(
padding: EdgeInsets.only(),
child: Container(
height: 80,
color: Color(0xFFBB0218),
child: Stack(
children: <Widget>[
Positioned(
child: Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: EdgeInsets.only(left: 20),
child: CircleAvatar(
radius: 30.0,
backgroundImage:
AssetImage("assets/girl.png"),
backgroundColor: Colors.white,
),
),
),
),
Positioned(
child: Align(
alignment: Alignment.centerLeft,
child: Padding(
padding:
EdgeInsets.only(left: 90, bottom: 40),
child: Text(
"Angela Moury",
style: TextStyle(
fontWeight: FontWeight.w500,
color: Colors.white,
fontSize: 16),
)),
),
),
Positioned(
child: Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: EdgeInsets.only(left: 90, top: 5),
child: Text(
"(254)7XX XX5 555",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w500,
fontSize: 14),
)),
),
),
Positioned(
child: Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: EdgeInsets.only(left: 90, top: 45),
child: Text("carrie.m@avunja.com",
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 14,
color: Colors.white)),
),
),
),
],
),
)),
Padding(
padding: EdgeInsets.only(left: 20, right: 20, top: 5),
child: Container(
child: Image.asset("assets/dividinglinedrawer.png"),
),
),
SizedBox(
height: 10,
),
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(),
child: ListTile(
leading: Image.asset('assets/power.png'),
title: Text(
'Online Status',
style: TextStyle(fontSize: 14, color: Colors.white),
),
trailing: CustomSwitch(
value: _enable,
onChanged: (bool val) {
setState(() {
_enable = val;
});
},
),
onTap: () {},
),
),
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(),
child: ListTile(
leading: Image.asset('assets/house.png'),
title: Text(
'Home',
style: TextStyle(
fontSize: 14, color: Colors.white),
),
onTap: () {},
),
),
],
),
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(),
child: ListTile(
leading: Image.asset('assets/mail.png'),
title: Text(
'Inbox',
style: TextStyle(
fontSize: 14, color: Colors.white),
),
onTap: () {},
),
),
],
),
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(),
child: ListTile(
leading: Image.asset('assets/notification.png'),
title: Text(
'Notifications',
style: TextStyle(
fontSize: 14, color: Colors.white),
),
onTap: () {},
),
),
],
),
SizedBox(
height: 5,
),
Padding(
padding: EdgeInsets.only(left: 20, right: 20, top: 5),
child: Container(
child: Image.asset("assets/dividinglinedrawer.png"),
),
),
SizedBox(
height: 5,
),
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(),
child: ListTile(
leading: Image.asset('assets/account.png'),
title: Text(
'Account',
style: TextStyle(
fontSize: 14, color: Colors.white),
),
onTap: () {},
),
),
],
),
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(),
child: ListTile(
leading: Image.asset('assets/payment.png'),
title: Text(
'Payment',
style: TextStyle(
fontSize: 14, color: Colors.white),
),
onTap: () {},
),
),
],
),
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(),
child: ListTile(
leading: Image.asset('assets/topup.png'),
title: Text(
'Topup',
style: TextStyle(
fontSize: 14, color: Colors.white),
),
onTap: () {},
),
),
],
),
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(),
child: ListTile(
leading: Image.asset('assets/withdraw.png'),
title: Text(
'Withdraw',
style: TextStyle(
fontSize: 14, color: Colors.white),
),
onTap: () {},
),
),
],
),
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(),
child: ListTile(
leading: Image.asset('assets/bills.png'),
title: Text(
'Bills & Utilities',
style: TextStyle(
fontSize: 14, color: Colors.white),
),
onTap: () {},
),
),
],
),
SizedBox(
height: 5,
),
Padding(
padding: EdgeInsets.only(left: 20, right: 20, top: 5),
child: Container(
child: Image.asset("assets/dividinglinedrawer.png"),
),
),
SizedBox(
height: 5,
),
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(),
child: ListTile(
leading: Image.asset('assets/reports.png'),
title: Text(
'Reports',
style: TextStyle(
fontSize: 14, color: Colors.white),
),
onTap: () {},
),
),
],
),
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(),
child: ListTile(
leading: Image.asset('assets/transactions.png'),
title: Text(
'Transactions',
style: TextStyle(
fontSize: 14, color: Colors.white),
),
onTap: () {},
),
),
],
),
SizedBox(
height: 5,
),
Padding(
padding: EdgeInsets.only(left: 20, right: 20, top: 5),
child: Container(
child: Image.asset("assets/dividinglinedrawer.png"),
),
),
SizedBox(
height: 5,
),
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(),
child: ListTile(
leading: Image.asset('assets/reward.png'),
title: Text(
'Rewards & Promotions',
style: TextStyle(
fontSize: 14, color: Colors.white),
),
onTap: () {},
),
),
],
),
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(),
child: ListTile(
leading: Image.asset('assets/refer.png'),
title: Text(
'Refer',
style: TextStyle(
fontSize: 14, color: Colors.white),
),
onTap: () {},
),
),
],
),
SizedBox(
height: 5,
),
Padding(
padding: EdgeInsets.only(left: 20, right: 20, top: 5),
child: Container(
child: Image.asset("assets/dividinglinedrawer.png"),
),
),
SizedBox(
height: 5,
),
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(),
child: ListTile(
leading: Image.asset('assets/support.png'),
title: Text(
'Support',
style: TextStyle(
fontSize: 14, color: Colors.white),
),
onTap: () {},
),
),
],
),
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(),
child: ListTile(
leading: Image.asset('assets/settings.png'),
title: Text(
'Settings',
style: TextStyle(
fontSize: 14, color: Colors.white),
),
onTap: () {},
),
),
],
),
],
),
SizedBox(
height: 5,
),
Padding(
padding: EdgeInsets.only(left: 20, right: 20, top: 5),
child: Container(
child: Image.asset("assets/dividinglinedrawer.png"),
),
),
SizedBox(
height: 15,
),
Padding(
padding: EdgeInsets.only(),
child: Container(
height: 60,
color: Color(0xFFBB0218),
child: Padding(
padding: EdgeInsets.only(),
child: ListTile(
leading: Image.asset('assets/logout.png'),
title: Text(
'Logout',
style:
TextStyle(fontSize: 14, color: Colors.white),
),
onTap: () {},
),
),
)),
SizedBox(
height: 50,
child: Container(
height: 50,
),
)
],
),
),
],
),
),
);
}
}
只需在要滚动的代码部分添加 - “ListView”，在不想滚动的“ListView”部分添加 - “physics: NeverScrollablePhysics()”
您可以使用两个 ListView 小部件来解决这个问题。
第一个 ListView，我们可以使用它的父 ListView 物理作为 NeverScrollableScrollPhysics() 然后你可以在里面使用 另一个 ListView父列表视图。然后您可以在父 ListView 中滚动子 ListView。
此外，您可以使用下面的示例。
ListView( //Parent ListView with physics as NeverScrollableScrollPhysics()
physics: NeverScrollableScrollPhysics(),
shrinkWrap : true,
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Container(alignment: Alignment.center, child: CircleAvatar(child: Icon(Icons.person, color: Colors.purple), backgroundColor: Colors.white)),
),
ListView( // scroll child ListView Widget
shrinkWrap : true,
children: [
GestureDetector(
child: getDrawerItem(Icons.person, 'Profile'),
onTap: () {},
),
GestureDetector(
child: getDrawerItem(Icons.history, 'History'),
onTap: () {},
),
GestureDetector(
child: getDrawerItem(Icons.data_usage, 'Performance'),
onTap: () {},
),
GestureDetector(
child: getDrawerItem(Icons.beach_access, 'Environments'),
onTap: () {},
),
],
),
Divider(),
GestureDetector(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: Container(
child: Text(
'Log Out',
style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 18.0, color: Color(0xFF251756)),
textAlign: TextAlign.center,
)),
),
),
onTap: () {},
)
],
);
希望这个回答能解决您的问题！
我不确定我是否完全理解您不想滚动的部分，但如果它是 AppBar()，那么请考虑使用 CustomScrollView()（在此处阅读更多内容：https://api.flutter.dev/flutter/widgets/CustomScrollView-class.html). In the slivers parameter you can then put a SliverAppBar() (read more here: https://api.flutter.dev/flutter/material/SliverAppBar-class.html) which you can pin to the screen or have it change when the user scrolls while staying on scroll or have it scroll with the screen. Underneath, you would then add your a SliverList() (read more here: https://api.flutter.dev/flutter/widgets/SliverList-class.html） ListView().
如果这不是您要查找的内容，请使用当前 UI 和所需 UI.
的屏幕截图更新您的 post建议你把抽屉做成屏风。将它的右侧完全设为白色，这样它就可以作为一个抽屉并像普通屏幕一样放置。堆叠列表视图，然后 physics: NeverScrollableScrollPhysics(), 将按预期工作。
使用自定义屏幕还有许多其他选项，因此您将拥有正确的东西，但会稍微妥协实际抽屉在屏幕上的模糊度，您也可以覆盖它，但它太复杂了，我想你可以试试。