flutterノート(九)---ラジオボックスRadio、RadioListTile

4963 ワード

flutterノート(一)----公式例&コード解読flutterノート(二)----hello worldとテキストコンポーネントText、TextSpan flutterノート(三)----容器コンポーネントContainer flutterノート(四)----画像Image flutterノート(五)----アイコンIcon flutterノート(六)----ボタン各種Button flutterノート(七)----チェックボックスCheckBoxCheckboxListTile flutterノート(8)----ラジオスイッチSwitch、SwitchListTile flutterノート(9)----ラジオボックスRadio、RadioListTile------初学の段階で、間違いや不足があれば補充を歓迎します.ありがとうございます.
前にチェックボックスとスイッチを勉強しましたが、ラジオボックスもありますので、ここで見てみましょう.

Radio


まずはconstructorを見て
Radio({
  Key key,
  @required T value,
  @required T groupValue,
  @required ValueChanged onChanged,
  Color activeColor,
  MaterialTapTargetSize materialTapTargetSize
})

このWidgetのconstructorは簡単で、このいくつかの属性は前に紹介したことがありますが、demoをどう使うかを見てみましょう.
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: Scaffold(
        body: RadioDemo()
      )
    );
  }
}

enum SingingCharacter { lafayette, jefferson }

class RadioDemo extends StatefulWidget {
  @override
  _RadioDemoState createState() => new _RadioDemoState();
}

class _RadioDemoState extends State {
  SingingCharacter _character = SingingCharacter.lafayette;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: 20.0),
      child: Column(
        children: [
          Radio(
            value: SingingCharacter.lafayette,
            groupValue: _character,
            activeColor: Colors.red,
            onChanged: (SingingCharacter value) {
              print(value);
              setState(() {
                _character = value;
              });
            },
          ),
          Radio(
            value: SingingCharacter.jefferson,
            groupValue: _character,
            onChanged: (SingingCharacter value) {
              print(value);
              setState(() {
                _character = value;
              });
            },
          )
        ]
      )
    );
  }
}

ここはちょっと見慣れないものがあるので、次に見てみましょう.
enum
列挙タイプ.公式文書は詳しいですhttp://dart.goodev.org/guides/language/language-tourここでは詳しくはお話ししません
Column
ここで簡単に紹介しますが、後で詳しく説明すると、このWidgetはhtmlの中のulに似ており、サブノードはchildrenのWidgetのセットであると簡単に理解できます.
T
constructorを見ていると、が多くなっています.これは汎用型で、<>の中にデータ型が入っています.例えば、Listの中にStringしか入れられないことを定義したい場合は、このように書くことができます.
var str = new List();

ここでTは代替タイプであり、実際にはプレースホルダである.

RadioListTile

const RadioListTile({
  Key key,
  @required T value,
  @required T groupValue,
  @required ValueChanged onChanged,
  Color activeColor,
  Widget title,
  Widget subtitle,
  bool isThreeLine: false,
  bool dense,
  Widget secondary,
  bool selected: false,
  ListTitleControlAffinity controlAffinity: ListTileControlAffinity.platform
})

demo
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: Scaffold(
        body: RadioDemo()
      )
    );
  }
}

enum SingingCharacter { lafayette, jefferson }

class RadioDemo extends StatefulWidget {
  @override
  _RadioDemoState createState() => new _RadioDemoState();
}

class _RadioDemoState extends State {
  SingingCharacter _character = SingingCharacter.lafayette;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          RadioListTile(
            value: SingingCharacter.lafayette,
            title: Text('lafayette'),
            groupValue: _character,
            activeColor: Colors.red,
            onChanged: (SingingCharacter value) {
              print(value);
              setState(() {
                _character = value;
              });
            },
          ),
          RadioListTile(
            value: SingingCharacter.jefferson,
            title: Text('jefferson'),
            groupValue: _character,
            onChanged: (SingingCharacter value) {
              print(value);
              setState(() {
                _character = value;
              });
            },
          )
        ]
      )
    );
  }
}

単独のRadioと比較してほとんど違いはありません.Radioの多い属性に対してここを見てください:flutterノート(七)---チェックボックスCheckBox、CheckboxListTile CheckboxListの中ですでに詳しく話しました.