如何解决颤振布局在Columan中有6个容器
我想在Column中制作6个容器,并使该容器可点击 like in the image
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Cours et exercices pour S5 LST IETEL"),),body: Container(
height: 150.0,width: 150.0,margin: const EdgeInsets.all(20.0),padding: EdgeInsets.symmetric(horizontal: 17.8,vertical: 30.5),alignment: Alignment.bottomCenter,decoration: new BoxDecoration(
// color: Colors.green,color: Hexcolor("#230A59"),borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(40.0),topRight: const Radius.circular(40.0))),child: Center(
child: Text(
"Electronique Analogique",style: TextStyle(
color: Hexcolor("#f2f2f2"),fontWeight: FontWeight.bold,fontFamily: 'Montserrat',fontSize: 20,);
}
}
解决方法
您可以简单地使用GridView.count
来帮助您生成布局。
代码示例
class MyWidget extends StatelessWidget {
final List<String> items;
MyWidget({this.items = const []});
@override
Widget build(BuildContext context) {
return GridView.count(
crossAxisCount: 2,children: <Widget>[
...items
.map<Widget>(
(e) => Container(
height: 150,width: 150,margin: const EdgeInsets.all(20.0),padding: EdgeInsets.symmetric(horizontal: 17.8,vertical: 30.5),alignment: Alignment.bottomCenter,decoration: BoxDecoration(
color: Color(0xFF230A59),borderRadius: BorderRadius.only(
topLeft: const Radius.circular(40.0),topRight: const Radius.circular(40.0),),child: Center(
child: Text(
e,style: TextStyle(
color: Color(0xFFf2f2f2),fontWeight: FontWeight.bold,// fontFamily: 'Montserrat',fontSize: 20,)
.toList(),],);
}
}
您只需创建一个GridView
为2的crossAxisCount
(因此每行将有2个项目),然后在其children
中生成窗口小部件列表即可。
在DartPad上尝试完整的代码。
,您可以使用GridView.count
,并且可以将对象放在类中以具有灵活的代码,并且可以为可点击容器定义onTap
属性,例如以下代码:
class Test1 extends StatelessWidget {
List<MainObject> list = [
MainObject(
onTap: () {/*some actions*/},MainObject(),];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Cours et exercices pour S5 LST IETEL"),body: GridView.count(
shrinkWrap: true,scrollDirection: Axis.vertical,crossAxisCount: 2,physics: ScrollPhysics(),children: List.generate(list.length,(index) => list[index]),));
}
}
class MainObject extends StatelessWidget {
final Function onTap;
MainObject({this.onTap});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onTap,child: Container(
height: 150.0,width: 150.0,decoration: new BoxDecoration(
// color: Colors.green,color: Color(0xff230A59),borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(40.0),topRight: const Radius.circular(40.0))),child: Center(
child: Text(
"Electronique Analogique",style: TextStyle(
color: Color(0xfff2f2f2),fontFamily: 'Montserrat',);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。