flutter 创建组件介绍

时间:2020-08-24

无状态组件

就是界面生成后,界面显示的内容不需要变化,就可以用无状态组件。

只需要组件继承 StatelessWidget 类。

import 'package:flutter/material.dart';
import 'package:wyzda/Category.dart';
import 'package:wyzda/UnitDetail.dart';
import 'package:wyzda/bean/UnitBean.dart';

class Unit extends StatelessWidget {
  final Listunitbean tools = Category.getUnitList();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('选择类别'),
        ),
        body: SingleChildScrollView(
          child: ListView.separated(
            shrinkWrap: true,
            physics: NeverScrollableScrollPhysics(),
            itemCount: tools.length,
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                title: Text(
                  tools[index].title,
                  maxLines: 1,
                ),
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) = UnitDetail(unitBean: tools[index]),
                    ),
                  );
                },
                dense: true,
              );
            },
            separatorBuilder: (BuildContext context, int index) =
                const Divider(
              height: 5,
            ),
          ),
        ));
  }
}

状态组件

界面上显示的数据会变化,比如点击后,界面上的数字会变,就需要创建状态组件。

只需要组件继承 StatefulWidget 类。

import 'package:flutter/material.dart';
import 'package:wyzda/state/CalculatorBaseState.dart';

class CalculatorBase extends StatefulWidget {
  CalculatorBase({Key key}) : super(key: key);

  @override
  CalculatorBaseState createState() = CalculatorBaseState();
}

还需要创建一个 CalculatorBaseState 类。

import 'package:flutter/material.dart';
import 'package:wyzda/CalculatorBase.dart';

class CalculatorBaseState extends Statecalculatorbase {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('计算器'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Text('计算器'),
      ),
    );
  }
}

在这个类里可以更新state值。

setState(() {
  toValue = val;
});