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:"標題參數"); //向小部件傳遞參數，用大括號方式接收
  }
}