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
前にチェックボックスとスイッチを勉強しましたが、ラジオボックスもありますので、ここで見てみましょう.
まずはconstructorを見て
このWidgetのconstructorは簡単で、このいくつかの属性は前に紹介したことがありますが、demoをどう使うかを見てみましょう.
ここはちょっと見慣れないものがあるので、次に見てみましょう.
enum
列挙タイプ.公式文書は詳しいですhttp://dart.goodev.org/guides/language/language-tourここでは詳しくはお話ししません
Column
ここで簡単に紹介しますが、後で詳しく説明すると、このWidgetはhtmlの中の
T
constructorを見ていると、
ここで
demo
単独の
------
初学の段階で、間違いや不足があれば補充を歓迎します.ありがとうございます.前にチェックボックスとスイッチを勉強しましたが、ラジオボックスもありますので、ここで見てみましょう.
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
の中ですでに詳しく話しました.