討論範圍

比較 Kotlin 和 Flutter 建立 View 的差異之處。

範例

以建立文字 "阿寶" 為例。

Kotlin

1. 檔案架構 : 要改xml檔(activity_main.xml)和code檔案(MainActivity.kt)，總共兩個檔案。
   

2. 元件名稱 : TextView

以下為xml檔案內容:

主要在設定 TextView 樣式排版與對應 id

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

以下為 code 檔案內容:

使用 xml 檔案的樣式後，透過 id 找到TextView，並設定TextView文字內容為阿寶

package com.example.kotlin_demo

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.TextView

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val tv : TextView = findViewById<TextView>(R.id.textView)
        tv.setText("阿寶")
    }
}

Flutter

1. 檔案架構 : 要改code檔案(main.dart)，總共一個檔案。
   

2. 元件名稱: Text

以下為 code 檔案內容:

1. 由程式進入點 main() 執行 App 內容。
2. 由於文字元件內容是不會被變動的，所以使用 StatelessWidget元件 MyApp。
3. StatelessWidget元件內容由 build 決定。
4. Text 元件被包在 MyApp 裡，Text 元件設定文字內容為阿寶。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(),
          body: Container(
              child: Text(
            "阿寶",
            style: TextStyle(fontSize: 20),
          ))),
      debugShowCheckedModeBanner: false,
    );
  }
}

統整思維差異

參考文章

Flutter 官方文件