当前位置：首页 > news >正文

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

news 2025/10/11 8:16:27

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});@overrideWidget 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++;});}@overrideWidget 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('跳转到第二页'),
)