列表视图中的特定文本在 flutter 中应该是不可滚动的
Particular text in List view should be non scrollable in flutter
在 Flutter 列表视图中，我用列表视图创建了一个大容器，里面有两个容器。顶部带有文本的容器不应该是可滚动的。
因为它是后台的容器，所以如果我禁用滚动，整个就被击中了。我只需要禁用标题为“公告”的文本不可滚动。
我尝试了很多方法。什么都没有解决。
例子
class _HomegemState extends State<Homegem> {
@override
Widget cont() {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 8.0,
spreadRadius: 0.5,
)
],
borderRadius: BorderRadius.circular(20),
border: Border.all(
color: Colors.white10,
),
),
child:Column(
mainAxisSize: MainAxisSize.max,
children: [
Padding(
padding: EdgeInsets.symmetric(vertical: 9.0),
child: Text(
'Covid-19 instructions',
style: TextStyle(
fontFamily: 'Roboto',
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
),
Padding(
padding: EdgeInsets.fromLTRB(18,0,16,0),
child: Text(
'Tenants are advised to wear mask and follow social distancing protocols inside the facility.\n Most people infected with the COVID-19 virus will experience mild to moderate respiratory illness and recover without requiring special treatment.\n Most people infected with the COVID-19 virus will experience mild to moderate respiratory illness and recover without requiring special treatment.\n luctus nec ullamcorper mattis, pulvinar dapibus leo \n',
style: TextStyle(
fontFamily: 'Roboto',
fontSize: 15,
// letterSpacing: 1.5,
),
textAlign: TextAlign.justify ,
),
),
],
),
),
);
}
Widget conttwo() {
return Padding(
padding: EdgeInsets.all(10),
child: Container(
// width: MediaQuery.of(context).size.width/1.05,
// height: MediaQuery.of(context).size.height * 0.18,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: Colors.white10,
),
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 8.0,
spreadRadius: 0.5,
)
],
),
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Padding(
padding: EdgeInsets.symmetric(vertical: 8.0),
child: Text(
'Lorem ipsum',
style: TextStyle(
fontFamily: 'Roboto',
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
),
Padding(
padding: EdgeInsets.fromLTRB(12, 0, 13, 0),
child: Text(
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo luctus nec ullamcorper mattis, pulvinar dapibus leo luctus nec ullamcorper mattis, pulvinar dapibus leo',
style: TextStyle(
fontFamily: 'Poppins',
fontSize: 15,
// letterSpacing: 1.6,
),
textAlign: TextAlign.justify,
),
)
],
),
),
);
}
body: SafeArea(
child: Column(
children: [
Container(
// height: MediaQuery.of(context).size.height / 3.15,
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
SizedBox(
height: 80,
),
Container(
width: MediaQuery.of(context).size.width/2.6,
height: MediaQuery.of(context).size.height * 0.11,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 8.0,
spreadRadius: 0.5,
// offset: Offset(
// 15.0, // Move to right 10 horizontally
// 15.0, // Move to bottom 10 Vertically
// ),
)
],
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: Colors.white10,
),
),
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Icon(
Icons.campaign_outlined,
color: Colors.black,
size: 45,
),
Text(
'Announcement',
style: TextStyle(
fontFamily: 'Roboto',
fontSize: 14,
fontWeight: FontWeight.w900,
color: Color(0xfff2B2B2B),
),
)
],
),
//BoxShadow
),
Container(
width: MediaQuery.of(context).size.width/2.6,
height: MediaQuery.of(context).size.height * 0.11,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 8.0,
spreadRadius: 0.5,
)
],
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: Colors.white10,
),
),
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Icon(
Icons.mood_bad_sharp,
color: Colors.black,
size: 45,
),
Text(
'Offers',
style: TextStyle(
fontFamily: 'Roboto',
fontSize: 14,
fontWeight: FontWeight.w900,
color: Color(0xfff2B2B2B),
),
)
],
),
)
],
),
Padding(
padding: EdgeInsets.fromLTRB(0, 7, 0, 0),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SizedBox(
height: 110,
),
Container(
width: MediaQuery.of(context).size.width/2.6,
height: MediaQuery.of(context).size.height * 0.11,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 8.0,
spreadRadius: 0.5,
)
],
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: Colors.white10,
),
),
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Icon(
Icons.account_circle_rounded,
color: Colors.black,
size: 45,
),
Text(
'Lorem ipsum',
style: TextStyle(
fontFamily: 'Roboto',
fontSize: 14,
fontWeight: FontWeight.w900,
color: Color(0xfff2B2B2B),
),
)
],
),
),
Container(
width: MediaQuery.of(context).size.width/2.6,
height: MediaQuery.of(context).size.height * 0.11,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 8.0,
spreadRadius: 0.5,
)
],
color: Colors.white,
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: Colors.white12,
),
),
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Icon(
Icons.account_box_sharp,
color: Colors.black,
size: 45,
),
Text(
'Lorem ipsum',
style: TextStyle(
fontFamily: 'Roboto',
fontSize: 14,
fontWeight: FontWeight.w900,
color: Color(0xfff2B2B2B),
),
)
],
),
)
],
),
),
],
),
),
// PreferredSize(child: child,
//
// preferredSize: Size.fromHeight(50.0),)
PreferredSize(child: Padding(
padding: const EdgeInsets.all(6.0),
child: Column(
children: [
Container(
width: MediaQuery.of(context).size.width/1,
//
height: MediaQuery.of(context).size.height * 0.42,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 8.0,
spreadRadius: 0.5,
)
],
borderRadius: BorderRadius.only(topLeft: Radius.circular(25),topRight: Radius.circular(25)),
),
child:ListView(
children: [
Column(
mainAxisSize: MainAxisSize.max,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'ANNOUNCEMENT',
style: TextStyle(
fontFamily: 'Roboto',
fontWeight: FontWeight.bold,
fontSize: 22,
decoration: TextDecoration.underline,
),
),
),
cont(),
conttwo(),
],
),
],
),
),
],
),
),
preferredSize: Size.fromHeight(1.0),),
),
),
);
}
}
重组如下：
Column(
children: [
Text('ANNOUNCEMENT'),
ListView(
children: [
cont(),
conttwo(),
],
),
],
),
此外，您将 Column 作为 ListView 的唯一子节点。当你有一个包含多个元素的列表要滚动浏览时，你应该只使用 ListView 。如果你想让 Column 可滚动，那么使用 SingleChildScrollView.
遵循 Patrick 的回答，但稍作修改。
Column(
children: [
Text('ANNOUNCEMENT'),
SizedBox(
height:500 //give a height of your choice
ListView(
children: [
cont(),
conttwo(),
],
),
),
],
),
在 Flutter 列表视图中，我用列表视图创建了一个大容器，里面有两个容器。顶部带有文本的容器不应该是可滚动的。 因为它是后台的容器，所以如果我禁用滚动，整个就被击中了。我只需要禁用标题为“公告”的文本不可滚动。 我尝试了很多方法。什么都没有解决。
例子
class _HomegemState extends State<Homegem> {
@override
Widget cont() {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 8.0,
spreadRadius: 0.5,
)
],
borderRadius: BorderRadius.circular(20),
border: Border.all(
color: Colors.white10,
),
),
child:Column(
mainAxisSize: MainAxisSize.max,
children: [
Padding(
padding: EdgeInsets.symmetric(vertical: 9.0),
child: Text(
'Covid-19 instructions',
style: TextStyle(
fontFamily: 'Roboto',
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
),
Padding(
padding: EdgeInsets.fromLTRB(18,0,16,0),
child: Text(
'Tenants are advised to wear mask and follow social distancing protocols inside the facility.\n Most people infected with the COVID-19 virus will experience mild to moderate respiratory illness and recover without requiring special treatment.\n Most people infected with the COVID-19 virus will experience mild to moderate respiratory illness and recover without requiring special treatment.\n luctus nec ullamcorper mattis, pulvinar dapibus leo \n',
style: TextStyle(
fontFamily: 'Roboto',
fontSize: 15,
// letterSpacing: 1.5,
),
textAlign: TextAlign.justify ,
),
),
],
),
),
);
}
Widget conttwo() {
return Padding(
padding: EdgeInsets.all(10),
child: Container(
// width: MediaQuery.of(context).size.width/1.05,
// height: MediaQuery.of(context).size.height * 0.18,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: Colors.white10,
),
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 8.0,
spreadRadius: 0.5,
)
],
),
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Padding(
padding: EdgeInsets.symmetric(vertical: 8.0),
child: Text(
'Lorem ipsum',
style: TextStyle(
fontFamily: 'Roboto',
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
),
Padding(
padding: EdgeInsets.fromLTRB(12, 0, 13, 0),
child: Text(
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo luctus nec ullamcorper mattis, pulvinar dapibus leo luctus nec ullamcorper mattis, pulvinar dapibus leo',
style: TextStyle(
fontFamily: 'Poppins',
fontSize: 15,
// letterSpacing: 1.6,
),
textAlign: TextAlign.justify,
),
)
],
),
),
);
}
body: SafeArea(
child: Column(
children: [
Container(
// height: MediaQuery.of(context).size.height / 3.15,
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
SizedBox(
height: 80,
),
Container(
width: MediaQuery.of(context).size.width/2.6,
height: MediaQuery.of(context).size.height * 0.11,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 8.0,
spreadRadius: 0.5,
// offset: Offset(
// 15.0, // Move to right 10 horizontally
// 15.0, // Move to bottom 10 Vertically
// ),
)
],
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: Colors.white10,
),
),
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Icon(
Icons.campaign_outlined,
color: Colors.black,
size: 45,
),
Text(
'Announcement',
style: TextStyle(
fontFamily: 'Roboto',
fontSize: 14,
fontWeight: FontWeight.w900,
color: Color(0xfff2B2B2B),
),
)
],
),
//BoxShadow
),
Container(
width: MediaQuery.of(context).size.width/2.6,
height: MediaQuery.of(context).size.height * 0.11,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 8.0,
spreadRadius: 0.5,
)
],
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: Colors.white10,
),
),
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Icon(
Icons.mood_bad_sharp,
color: Colors.black,
size: 45,
),
Text(
'Offers',
style: TextStyle(
fontFamily: 'Roboto',
fontSize: 14,
fontWeight: FontWeight.w900,
color: Color(0xfff2B2B2B),
),
)
],
),
)
],
),
Padding(
padding: EdgeInsets.fromLTRB(0, 7, 0, 0),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SizedBox(
height: 110,
),
Container(
width: MediaQuery.of(context).size.width/2.6,
height: MediaQuery.of(context).size.height * 0.11,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 8.0,
spreadRadius: 0.5,
)
],
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: Colors.white10,
),
),
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Icon(
Icons.account_circle_rounded,
color: Colors.black,
size: 45,
),
Text(
'Lorem ipsum',
style: TextStyle(
fontFamily: 'Roboto',
fontSize: 14,
fontWeight: FontWeight.w900,
color: Color(0xfff2B2B2B),
),
)
],
),
),
Container(
width: MediaQuery.of(context).size.width/2.6,
height: MediaQuery.of(context).size.height * 0.11,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 8.0,
spreadRadius: 0.5,
)
],
color: Colors.white,
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: Colors.white12,
),
),
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Icon(
Icons.account_box_sharp,
color: Colors.black,
size: 45,
),
Text(
'Lorem ipsum',
style: TextStyle(
fontFamily: 'Roboto',
fontSize: 14,
fontWeight: FontWeight.w900,
color: Color(0xfff2B2B2B),
),
)
],
),
)
],
),
),
],
),
),
// PreferredSize(child: child,
//
// preferredSize: Size.fromHeight(50.0),)
PreferredSize(child: Padding(
padding: const EdgeInsets.all(6.0),
child: Column(
children: [
Container(
width: MediaQuery.of(context).size.width/1,
//
height: MediaQuery.of(context).size.height * 0.42,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 8.0,
spreadRadius: 0.5,
)
],
borderRadius: BorderRadius.only(topLeft: Radius.circular(25),topRight: Radius.circular(25)),
),
child:ListView(
children: [
Column(
mainAxisSize: MainAxisSize.max,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'ANNOUNCEMENT',
style: TextStyle(
fontFamily: 'Roboto',
fontWeight: FontWeight.bold,
fontSize: 22,
decoration: TextDecoration.underline,
),
),
),
cont(),
conttwo(),
],
),
],
),
),
],
),
),
preferredSize: Size.fromHeight(1.0),),
),
),
);
}
}
重组如下：
Column(
children: [
Text('ANNOUNCEMENT'),
ListView(
children: [
cont(),
conttwo(),
],
),
],
),
此外，您将 Column 作为 ListView 的唯一子节点。当你有一个包含多个元素的列表要滚动浏览时，你应该只使用 ListView 。如果你想让 Column 可滚动，那么使用 SingleChildScrollView.
遵循 Patrick 的回答，但稍作修改。
Column(
children: [
Text('ANNOUNCEMENT'),
SizedBox(
height:500 //give a height of your choice
ListView(
children: [
cont(),
conttwo(),
],
),
),
],
),