7 Flutter UI 之自定义有状态组件和自定义底部导航条

最新推荐文章于 2024-06-19 18:17:32 发布

原创最新推荐文章于 2024-06-19 18:17:32 发布 · 307 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

Flutter UI 专栏收录该内容

14 篇文章

订阅专栏

文章介绍了Flutter中的StatefulWidget和StatelessWidget，前者在生命周期内可改变状态，例如用于计数器；后者则无状态，不可改变。接着展示了如何在列表中自定义新增数据并实现刷新。最后，讲解了BottomNavigationBar的使用，包括基础结构设置和页面跳转功能实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一有状态和无状态

StatelessWidget 无状态的组件

StatefulWidget 有状态的组件，在生命周期内组件状态可以改变

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int countNumber = 1;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(height: 200),
        Text("$countNumber"),
        SizedBox(height: 100),
        ElevatedButton(
            onPressed: () {
              setState(() {
                countNumber++;
              });
              print("$countNumber");
            },
            child: Text("change one second")),
      ],
    );
  }
}

二自定义新增数据刷新列表

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List sourceData = [];
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        Column(
          children: sourceData.map((value) {
            return Text(value);
          }).toList(),
        ),
        SizedBox(height: 20),
        ElevatedButton(
          child: Text("新增数据"),
          onPressed: () {
            setState(() {
              sourceData.add("new add data");
            });
          },
        )
      ],
    );
  }
}

三自定义导航条

1 基本结构

BottomNavigationBar是Scaffold脚手架中的位于底部的一个组件,底部导航栏

bottomNavigationBar: BottomNavigationBar(
          backgroundColor: Colors.blue,
          selectedItemColor: Colors.red,
          unselectedItemColor: Colors.grey,
          currentIndex: currentIdx,
          // 默认传入的索引值
          onTap: (index) {
            setState(() {
              currentIdx = index;
            });
          },
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home_filled), label: "首页"),
            BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),
            BottomNavigationBarItem(
                icon: Icon(Icons.shopping_cart), label: "购物车"),
            BottomNavigationBarItem(icon: Icon(Icons.book), label: "我的")
          ]),

2 页面的跳转

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'Category.dart';
import 'Home.dart';
import 'ShopCart.dart';
import 'Profile.dart';

class Tabs extends StatefulWidget {
  const Tabs({super.key, required this.title});
  final String title;

  @override
  State<Tabs> createState() => _TabState();
}

class _TabState extends State<Tabs> {
  int currentIdx = 0;

  List pages = [MyHomePage(), CategoryPage(), ShopCartPage(), ProfilePage()];
  @override
  Widget build(BuildContext context) {
    // 选中的索引值
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: pages[this.currentIdx],
      bottomNavigationBar: BottomNavigationBar(
          backgroundColor: Colors.blue,
          selectedItemColor: Colors.red,
          unselectedItemColor: Colors.grey,
          currentIndex: currentIdx,
          // 默认传入的索引值
          onTap: (index) {
            setState(() {
              currentIdx = index;
            });
          },
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home_filled), label: "首页"),
            BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),
            BottomNavigationBarItem(
                icon: Icon(Icons.shopping_cart), label: "购物车"),
            BottomNavigationBarItem(icon: Icon(Icons.book), label: "我的")
          ]),
    );
  }
}