flutter - Flutter 中带有文本和单选按钮的动态 ListView

Question

无法在 flutter 中创建带有文本和单选按钮的动态 ListView

当我动态创建时(从服务中获取数据并将数据与文本绑定(bind))带有文本和单选按钮的 ListView 当我选择单选按钮时它没有显示已选择(指示符)；

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;}}

只是我想创建带有文本的动态 ListView 并选择可用的单选按钮

Answer 1

首先，您可以轻松地对没有单选按钮的行使用 gestureDetector 并且将单选按钮放在尾部，listTile 就像列表的一行，标题和尾部作为图 block 内的相对位置(listTile 是您想要的包含文本和单选按钮的列表行)。ps:GestureDetector 是一个小部件，因此您可以返回它而不是行的左侧。

return ListTile(
          leading:GestureDetector(
                    child: //add the text here,
                    onTap: () { 
                      //here handle the onclick for text

                     } ,
           ) ,
          trailing://here add the radio button with onchanged normally,

                  );

希望这能回答您的问题。