Flutter中带有文本和单选按钮的动态列表视图

时间:2019-03-29 09:12:42

标签: flutter

无法创建带有文本和单选按钮的动态列表视图

当我动态创建(从服务中获取数据并用文本绑定数据)当我选择单选按钮时,它带有文本和单选按钮的列表视图未显示为选中状态(指示符);

import 'package:flutter/material.dart';
class DemoTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
    theme: new ThemeData(
     primarySwatch: Colors.blue,
                   ),
      home: new DemoTestStatesFull(),
    );}}
class DemoTestStatesFull extends StatefulWidget {
  DemoTestState createState() => DemoTestState();
}

class DemoTestState extends State {
  final List<String> floor_list = [
    "floor1",
    "floor2",
    "floor3",
    "floor4",
    "floor5",
    "floor6",
  ];
  int _selectedIndex =0;
  int  _value2=0;
  Container datacontainer=new Container();

  _onSelected(int index) {
    setState(() => _selectedIndex = index);
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dynamic View Example'),
      ),
      body: Stack(
          children: <Widget>[
            new RaisedButton(
                child: Text("Fetch Data"),
                onPressed:() {setState(() {
                    datacontainer= DisplayData(floor_list);//  Let Suppose  Here  getting data from web service after json parsing  string list is
                    print("Button is clicked");
                  });}),
            datacontainer,
     ],));}
  Widget  DisplayData(List<String>floorlist)
  {
    datacontainer   =new Container(
      height: 300.00,
      width: 400.00,
      child:  ListView.builder(
          itemCount: (floorlist.length),
          itemBuilder: (context, i) {
            return new InkResponse(
                enableFeedback: true,
                onTap: ()
                {
                  print(" Card index is  $i");
                },
                child:new Card(
                    color: _selectedIndex != null && _selectedIndex == i ? Colors.greenAccent : Colors.white,
                    elevation: 3.0,
                    margin: EdgeInsets.fromLTRB(5.00, 0.00, 5.00,5.00),
                    child: Row(
                        mainAxisSize: MainAxisSize.min,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: <Widget>[
                          Padding(padding: const EdgeInsets.fromLTRB(20.00,0.0, 0.0,0.0)),
                          Padding(
                            padding: const EdgeInsets.all(10.0),
                            child: Text(floorlist[i], style: new 
TextStyle(fontSize: 20.0,
                                fontWeight: FontWeight.bold)),
                          ),
                          Padding(padding: const EdgeInsets.fromLTRB(70.00, 
                        0.0, 0.0,0.0)),
                          Padding(
                            padding: const EdgeInsets.all(10.0),
                            child: Text(floorlist[i], style: new 
                             TextStyle(fontSize: 20.0,
                                fontWeight: FontWeight.bold)),
                          ),
                          new Radio(
                            value: i,
                            groupValue: _value2,
                            onChanged:(int value)
                            {
                              setState(() {
                                _value2=value;
                                print("Radio index is  $value");
                             });}),])));}
      ),);return datacontainer;}}

我只是想创建带有文本的动态列表视图并选择功能强大的单选按钮

1 个答案:

答案 0 :(得分:0)

首先,您可以轻松地在没有单选按钮和 将单选按钮放在末尾,listTile就像是列表的一行,并在其下并将标题和结尾作为磁贴内的相对位置(listTile是要包含文本和单选按钮的列表行)。 ps:GestureDetector是一个小部件,因此您可以返回它而不是该行的左侧。

True/False

希望能回答您的问题。