Flutter基本组件

基本组件

Container和Text

Image

1. 第一种
   

2. 第二种

   利用Container的DecorationImage参数实现
   

3. 第三种

   利用ClipOval组件实现自动裁剪的圆形图片(可能为椭圆)
   

加载本地图片

1. 创建对应文件夹，导入图片
   

2. 编辑pubspec.yaml文件
   

3. 使用
   

ListView

1. 简单图文列表
   
   

2. 水平列表
   

3. 模拟动态获取列表
   
   

4. builder方法
   
   

GridView

1. GridView.count
   
   

2. GridView.builder
   
   

Padding

Row和Column

Expanded

1. 比例分配
   

2. 左侧固定宽度，右侧自适应宽度
   

Stack(层叠，指定位置)

1. 直接使用
   

2. 结合Align组件
   

3. 结合Positioned组件
   

AspectRatio和Card

Wrap(搜索筛选等，自动换行布局)

StatefulWidget

BottomNavigationBar（Tab）

普通路由、普通路由传值

命名路由、命名路由传值

命名路由

1. 在main.dart中配置
   

2. 调用
   

命名路由传值

1. 方式一：
   
   

2. 方式二：
   
   
   

3. 如果是StatefulWidget
   

路由替换

返回到指定路由