Skip to content

Flutter开发中常用的基础组件

· 7 min

Flutter 开发中常用的基础组件，一口气给你捋清楚#

Flutter 这套组件家族多得像过年走亲戚，但常用的就那几位，摸熟了，写 UI 真就顺滑得很。下面按照“最常遇到的场景”来分组，配上小例子，能抄能用。

页面骨架：Scaffold 家族#

Scaffold(
  appBar: AppBar(title: const Text('主页')),
  body: const Center(child: Text('Hello Flutter')),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: const Icon(Icons.add),
  ),
  bottomNavigationBar: BottomNavigationBar(
    items: const [
      BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
      BottomNavigationBarItem(icon: Icon(Icons.settings), label: '设置'),
    ],
  ),
  drawer: const Drawer(child: Center(child: Text('抽屉内容'))),
);

文本、图标、图片：显示是第一要务#

const Text('一条朴实无华的文字', style: TextStyle(fontSize: 16));


Text.rich(TextSpan(
  text: '账号：',
  children: [
    TextSpan(text: 'breeze', style: const TextStyle(fontWeight: FontWeight.bold)),
  ],
));


Image.network('https://picsum.photos/200', fit: BoxFit.cover);

盒子与装饰：把内容装好看#

Container(
  padding: const EdgeInsets.all(12),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(12),
    boxShadow: [BoxShadow(blurRadius: 8, color: Colors.black12)],
  ),
  child: const Text('盒子里头装点东西'),
);


const SizedBox(height: 16);

布局三件套：Row / Column / Stack#

Row(
  children: const [
    Icon(Icons.place),
    SizedBox(width: 8),
    Expanded(child: Text('北京市 朝阳区 宋庄镇 123 号很长很长的地址')),
  ],
);


Stack(
  children: [
    Image.network('https://picsum.photos/400/200'),
    const Positioned(right: 8, bottom: 8, child: Chip(label: Text('NEW'))),
  ],
);

滚动与列表：一天不用，浑身难受#

ListView.builder(
  itemCount: 50,
  itemBuilder: (context, index) => Card(
    margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
    child: ListTile(
      leading: CircleAvatar(child: Text('${index + 1}')),
      title: Text('标题 $index'),
      subtitle: const Text('副标题来一口'),
      trailing: const Icon(Icons.chevron_right),
    ),
  ),
);

输入与表单：能看更要能用#

final controller = TextEditingController();


TextField(
  controller: controller,
  decoration: const InputDecoration(
    labelText: '用户名',
    prefixIcon: Icon(Icons.person),
    border: OutlineInputBorder(),
  ),
);

表单简单示例：

final formKey = GlobalKey<FormState>();


Form(
  key: formKey,
  child: Column(
    children: [
      TextFormField(
        validator: (v) => (v == null || v.isEmpty) ? '必填' : null,
      ),
      const SizedBox(height: 12),
      ElevatedButton(
        onPressed: () {
          if (formKey.currentState!.validate()) {
            // 过关，提交！
          }
        },
        child: const Text('提交'),
      ),
    ],
  ),
);

按钮全家桶：按下去就有故事#

Row(
  children: [
    ElevatedButton(onPressed: () {}, child: const Text('确定')),
    const SizedBox(width: 8),
    OutlinedButton(onPressed: () {}, child: const Text('取消')),
    const SizedBox(width: 8),
    IconButton(onPressed: () {}, icon: const Icon(Icons.share)),
  ],
);

水波反馈更有质感：

InkWell(
  onTap: () {},
  borderRadius: BorderRadius.circular(8),
  child: const Padding(
    padding: EdgeInsets.all(12),
    child: Text('点我有水波'),
  ),
);

导航与切页：从这页到那页#

DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: AppBar(
      title: const Text('标签页'),
      bottom: const TabBar(tabs: [
        Tab(text: '消息'),
        Tab(text: '联系人'),
        Tab(text: '我'),
      ]),
    ),
    body: const TabBarView(children: [
      Center(child: Text('消息页')),
      Center(child: Text('联系人页')),
      Center(child: Text('我的页')),
    ]),
  ),
);

反馈与弹层：有事说一声#

ScaffoldMessenger.of(context).showSnackBar(
  const SnackBar(content: Text('已保存')),
);

状态与组件：写 UI 的“基本功”#

class Counter extends StatefulWidget {
  const Counter({super.key});


  @override
  State<Counter> createState() => _CounterState();
}


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


  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        IconButton(onPressed: () => setState(() => count--), icon: const Icon(Icons.remove)),
        Text('$count'),
        IconButton(onPressed: () => setState(() => count++), icon: const Icon(Icons.add)),
      ],
    );
  }
}

实战小拼盘：卡片列表 + 搜索框 + 刷新#

class DemoPage extends StatelessWidget {
  const DemoPage({super.key});


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('常用组件拼盘')),
      body: RefreshIndicator(
        onRefresh: () async => Future.delayed(const Duration(milliseconds: 800)),
        child: ListView(
          padding: const EdgeInsets.all(12),
          children: [
            TextField(
              decoration: InputDecoration(
                hintText: '搜索点啥…',
                prefixIcon: const Icon(Icons.search),
                border: OutlineInputBorder(borderRadius: BorderRadius.circular(12)),
              ),
            ),
            const SizedBox(height: 12),
            ...List.generate(5, (i) => Card(
              child: ListTile(
                leading: CircleAvatar(child: Text('${i + 1}')),
                title: Text('标题 $i'),
                subtitle: const Text('这里是副标题'),
                trailing: const Icon(Icons.chevron_right),
                onTap: () {},
              ),
            )),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {},
        icon: const Icon(Icons.add),
        label: const Text('新建'),
      ),
    );
  }
}

经验小贴士#

小结#

这些基础组件就是 Flutter 开发的“十八般兵器”，顺手用好，你的界面就有章有法，还带点“手起刀落”的快感。去码两把，越用越顺！