Flutter 常用Widget | 小x的博客

type

status

date

slug

summary

📝 widget内容

1.materialApp 封装常用widget 常用home 2.Scafflod 实现整体布局常用appBar ，body 3.container 容器组件，常用alignment/decoration/margin/apdding/transform/height(double.infinity)/width/child 4.Text 文本组件，首个参数是字符串类型；常接着textAlign/textDirection/overflow/maxLines/style: Textstyle(decoration/wordSpacing/fontSize/color) 5.image 图片组件，有Image.asset和Image.nnetwork两种方式；支持alignment/color/colorBlendMode/fit/width/heigh/repeat 6.圆形图片支持用container和clipOval组件实现 7.Column 列和Row 行组件，屏幕里列展开形式展示各个组件，children是list[] 8.Icons 图标组件，常用Icon(Icons.search,color:Colors.red,size:10) 9.ListView 列表组件，scrollDirection: Axis.horizontal/Axis.vertical 水平列表和垂直列表，padding 内边距，children 列表元素，ListTile(leading: Icon(Icons.people, color: Colors.red),title: Text("xxx"),subtitle: Text("xxx"))

10.ListView.builder可实现动态列表 11.Divider() 横线 12.GridView.count 实现横轴固定数量的网格布局，crossAxisCount: 3指定数量和childAspectRatio 宽高比 13.GridView.extent实现横轴子元素的固定长度的网格布局，maxCrossAxisExtent: 80.0指定长度和childAspectRatio 宽高比 14.GridView.builder实现动态列表（SliverGridDelegateWithFixedCrossAxisCount/SliverGridDelegateWithMaxCrossAxisExtent） 15.Padding 内边距组件，EdgeInsetss设置填充值 16.线性布局（Row和Column）,mainAxisAlignment/crossAxisAlignment 设置主次轴排序方式；MainAxisAlignment.spaceEvenly是主轴均匀分布，次轴排序需要有外侧组件便于定位 17.弹性布局（Flex Expanded），主要是实现屏幕占比的；知道主轴方向，使用Row 或Column 会方便，Row 和Column 都继承自Flex， Axis.horizontal/Axis.vertical 水平和垂直放行布局，和Expanded 配合实现弹性布局，Expanded(flex: 2, child: IconContainer(Icons.home, color: Colors.red) 18.stack 堆，层叠形态，alignment配置子元素的显示位置，children配置子组件 19.stack常接children为list<widget>的子元素；然后用align指定子元素位置 20. Stack组件中结合Positioned组件也可以控制每个子元素的显示位置

21. final size =MediaQuery.of(context).size; 获取屏幕尺寸，size.width是款size.height是高 22. AspectRatio 调整子元素宽高比，要看外层是否允许按照这种比率进行布局，这只是一个参考值

23.card 卡片，margin，padding，shadowcolor，color背景颜色，child，elevation阴影深度，shape形状 23. ButtonStyle 按钮样式， foregroudcolor文字颜色backgroundcolor背景颜色，shadowcolor背景颜色，elevation阴影深度，padding内边距，shape形状，side边框圆形按钮案例： shape: MaterialStateProperty.all( CircleBorder(side: BorderSide(color: Colors.white)), ))

24. ElevatedButton 凸起按钮； onPressed: () {}, 点击后的动作 25. TextButton 文本按钮；onPressed: () {}, 点击后的动作 26. OutlinedButton 边框按钮 onPressed: () {}, 点击后的动作 27. IconButton 是一个可点击的Icon，不包括文字，默认没有背景，点击后会出现背景，其他三个也有.icon的图标构造函数

未完结~

📎 参考文章

💡

你记住了吗~