Flutter —— 自定义 Widget

一、自定义 Widget

1. 无状态 StatelessWidget

返回目录

import 'package:flutter/material.dart'

class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
  	return Text("无状态小部件")
  }
}

2. 有状态 StatefulWidget

返回目录

import 'package:flutter/material.dart'

class Example extends StatefulWidget {
  @override
  ExampleState createState() => ExampleState();
}
  
class ExampleState extends State<Example> {
  @override
  Widget build(BuildContext context) {
  	return Test("有状态小部件")
  }
}

3. 接收参数

返回目录

StatelessWidget

import 'package:flutter/material.dart';

class Example extends StatelessWidget {
  final String title;
  const Example(this.title);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(this.title)),
      body: Text(this.title),
    );
  }
}

StatefulWidget

import 'package:flutter/material.dart';

class Example extends StatefulWidget {
  final String title;
  const Example({this.title}); //大括号方式接收参数

  @override
  ExampleState createState() => ExampleState();
}

class ExampleState extends State<Example> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title), //用 wedget 访问参数
      body: Text(widget.title),
    );
  }
}

4. 引用，并传递参数

返回目录

import 'package:flutter/material.dart'
import '../pages/Example.dart'; //引用自定义小部件

class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
  	return Example("标题参数"); //向小部件传递参数
  	// return Example(title:"标题参数"); //向小部件传递参数，用大括号方式接收
  }
}