Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SwiftUIと比較してみた時のFlutter

 SwiftUIと比較してみた時のFlutter

Tatsuya Tanaka

June 23, 2020
Tweet

More Decks by Tatsuya Tanaka

Other Decks in Programming

Transcript

  1. ాத ୡ໵ / ͨͳͨͭ (@tattn) • Yahoo!ΧʔφϏ ←Yahoo!৐׵Ҋ಺ • iOSΞϓϦΤϯδχΞ

    • ৽ٕज़ͷݕূ @tattn @tanakasan2525 @tattn Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
  2. ϘλϯΛԡ͢ͱ1૿͑Δը໘ (SwiftUI) struct ContentView: View { @State var count =

    0 var body: some View { VStack { Text("Count: \(count)") .font(.largeTitle) Spacer() .frame(height: 20) Button(action: { self.count += 1 }, label: { Text("Increment") }) } } }
  3. ϘλϯΛԡ͢ͱ1૿͑Δը໘ (Flutter) class CounterApp extends StatefulWidget { @override _CounterAppState createState()

    => _CounterAppState(); } class _CounterAppState extends State<CounterApp> { int _count = 0; @override Widget build(BuildContext context) { return Center( child: Column( mainAxisSize: MainAxisSize.min, children: [ Text('Count: $_count', style: Theme.of(context).textTheme.headline5), SizedBox(height: 20), FlatButton( child: Text('Increment'), onPressed: () => setState(() => _count++), ) ], ), ); } } ͪΐͬͱίʔυྔଟ͘ݟ͑·͕͢ɺ εχϖοτͰࣗಈੜ੒͞ΕΔͷͰهड़ྔ͸ಉ͘͡Β͍
  4. ϘλϯΛԡ͢ͱ1૿͑Δը໘ (Flutter) class _CounterAppState extends State<CounterApp> { int _count =

    0; @override Widget build(BuildContext context) { return Center( child: Column( mainAxisSize: MainAxisSize.min, children: [ Text('Count: $_count', style: Theme.of(context).textTheme.headline5), SizedBox(height: 20), FlatButton( child: Text('Increment'), onPressed: () => setState(() => _count++), ) ], ), ); } } ࣗಈੜ੒෦෼ΛΧοτͯ͠ຊ࣭ͷΈʹ͢Δͱ͜Μͳײ͡
  5. ϘλϯΛԡ͢ͱ1૿͑Δը໘ (Flutter | SwiftUI) ࣅͨΑ͏ͳײ֮Ͱॻ͚·͢ class _CounterAppState extends State<CounterApp> {

    int _count = 0; @override Widget build(BuildContext context) { return Center( child: Column( mainAxisSize: MainAxisSize.min, children: [ Text('Count: $_count', ɹɹ style: Theme.of(context).textTheme.headline5), SizedBox(height: 20), FlatButton( child: Text('Increment'), onPressed: () => setState(() => _count++), ) ], ), ); } } struct ContentView: View { @State var count = 0 var body: some View { VStack { Text("Count: \(count)") .font(.largeTitle) Spacer() .frame(height: 20) Button(action: { self.count += 1 }, label: { Text("Increment") }) } } }
  6. Hot Reload͕ "ͪΌΜͱ" ࢖͑Δ • ⌘+SΛԡ͢ͱอଘ͞ΕࣗಈͰView͕ߋ৽͞ΕΔ • γϛϡϨʔλͰ΋࣮ػͰ΋࢖͑Δ • ϓϩδΣΫτ͕େ͖ͯ͘΋൓ө·Ͱ1ඵ͘Β͍

    • Ϧϩʔυલͷঢ়ଶ͕࢒Δ SwiftUIͷϓϨϏϡʔ͸ίϯϙʔωϯτ୯Ґ͕جຊͰ͕͢ɺ Flutter͸σόοάϏϧυதͷΞϓϦΛಈతʹॻ͖׵͑Δײ֮
  7. SwiftUIͷྑ͍ͱ͜Ζ ϝιουνΣʔϯ (modifier) ʹΑΔViewͷΧελϚΠζ͸ ೖΕࢠΛݮΒͤͯಡΈ΍͍͢ɻ (౰ͨΓલͰ͕͢)ωΠςΟϒͷػೳΛ͔ΜͨΜʹσόοάͰ͖Δɻ Swift͸ຊ౰ʹྑ͍ݴޠɻ Text("WWDC") .padding() .border(Color.red,

    width: 3) Container( decoration: BoxDecoration( border: Border.all(color: Colors.red, width: 3), ), padding: const EdgeInsets.all(8), child: Text("WWDC"), ) Container( decoration: BoxDecoration( border: Border.all(color: Colors.red, width: 3), ), child: Padding( padding: const EdgeInsets.all(8), child: Text("WWDC"), ), ), ωετΛݮΒͨ͢ΊʹpaddingΛ Ҿ਺ͰࢦఆͰ͖ΔWidget΋͋Δ