Flutter中新手需要掌握的几种Widget

1. 按功能分类的核心 Widget

布局类 Widget

作用： 控制其他 Widget 的排列和位置

// Row - 水平排列
Row(
  children: [Text('A'), Text('B'), Text('C')],
)

// Column - 垂直排列
Column(
  children: [Text('A'), Text('B'), Text('C')],
)

// Stack - 层叠布局
Stack(
  children: [
    Container(color: Colors.blue),
    Positioned(
      top: 10,
      child: Text('Overlay'),
    ),
  ],
)

// Expanded - 填充剩余空间
Row(
  children: [
    Container(width: 50, color: Colors.red),
    Expanded(
      child: Container(color: Colors.blue),
    ),
  ],
)

基础显示 Widget

作用： 显示内容和信息

// Text - 文本显示
Text(
  'Hello World',
  style: TextStyle(fontSize: 16, color: Colors.black),
)

// Image - 图片显示
Image.asset('assets/logo.png') // 本地图片
Image.network('https://example.com/image.jpg') // 网络图片

// Icon - 图标
Icon(Icons.star, color: Colors.yellow)

// Container - 多功能容器
Container(
  width: 100,
  height: 100,
  margin: EdgeInsets.all(10),
  padding: EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(8),
  ),
  child: Text('Content'),
)

交互类 Widget

作用： 接收用户输入和交互

// 按钮系列
ElevatedButton(
  onPressed: () => print('Clicked'),
  child: Text('Elevated Button'),
)

TextButton(
  onPressed: () {},
  child: Text('Text Button'),
)

IconButton(
  onPressed: () {},
  icon: Icon(Icons.favorite),
)

// 输入框
TextField(
  decoration: InputDecoration(
    labelText: '用户名',
    hintText: '请输入用户名',
  ),
  onChanged: (value) => print(value),
)

// 开关
Switch(
  value: _isOn,
  onChanged: (value) => setState(() => _isOn = value),
)

// 复选框
Checkbox(
  value: _isChecked,
  onChanged: (value) => setState(() => _isChecked = value),
)

列表和网格 Widget

作用： 显示可滚动的列表数据

// ListView - 列表
ListView(
  children: [
    ListTile(title: Text('Item 1')),
    ListTile(title: Text('Item 2')),
    ListTile(title: Text('Item 3')),
  ],
)

// ListView.builder - 动态列表
ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(title: Text(items[index]));
  },
)

// GridView - 网格
GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2, // 每行2个
  ),
  itemCount: 20,
  itemBuilder: (context, index) {
    return Card(child: Center(child: Text('Item $index')));
  },
)

2. 按状态分类的 Widget

StatelessWidget - 无状态组件

特点： 一旦创建，内容不会改变

class MyText extends StatelessWidget {
  final String content;
  
  MyText({required this.content});
  
  @override
  Widget build(BuildContext context) {
    return Text(content);
  }
}

// 使用
MyText(content: 'Hello World')

StatefulWidget - 有状态组件

特点： 可以管理内部状态，状态改变时会重新构建

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _count = 0;

  void _increment() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $_count'),
        ElevatedButton(
          onPressed: _increment,
          child: Text('Add'),
        ),
      ],
    );
  }
}

3. 页面结构类 Widget

Scaffold - 页面脚手架

作用： 提供标准的页面结构

Scaffold(
  appBar: AppBar(
    title: Text('My App'),
    actions: [
      IconButton(icon: Icon(Icons.search), onPressed: () {}),
    ],
  ),
  body: Center(
    child: Text('Page Content'),
  ),
  drawer: Drawer( // 侧边栏
    child: ListView(
      children: [ListTile(title: Text('Menu 1'))],
    ),
  ),
  bottomNavigationBar: BottomNavigationBar(
    items: [
      BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
      BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'),
    ],
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
)

AppBar - 应用栏

AppBar(
  title: Text('页面标题'),
  backgroundColor: Colors.blue,
  elevation: 4, // 阴影
  actions: [
    IconButton(icon: Icon(Icons.share), onPressed: () {}),
  ],
)

4. 样式和装饰 Widget

// Padding - 内边距
Padding(
  padding: EdgeInsets.all(16),
  child: Text('有内边距的文本'),
)

// Center - 居中
Center(
  child: Text('居中文本'),
)

// SizedBox - 固定尺寸
SizedBox(
  width: 200,
  height: 100,
  child: ElevatedButton(onPressed: () {}, child: Text('按钮')),
)

// Card - 卡片
Card(
  elevation: 5,
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Text('卡片内容'),
  ),
)

5. 导航类 Widget

// 在 build 方法中使用
ElevatedButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => SecondPage()),
    );
  },
  child: Text('跳转到第二页'),
)

学习路径建议

1. 第一阶段：掌握 Text、Container、Column、Row、Button

2. 第二阶段：学习 ListView、GridView、TextField

3. 第三阶段：理解 StatefulWidget 和状态管理

4. 第四阶段：掌握 Scaffold 和完整的页面结构

5. 第五阶段：学习导航和路由

这些 Widget 是 Flutter 开发的基石，熟练掌握后就能构建出功能完整的应用界面