Question

我想在ListTile的字幕上水平显示2个单选按钮。我只能看到一个单选按钮

List<QuestionsOptions> optionsList = [
QuestionsOptions(
  index: 1,
  name: "Yes",
),
QuestionsOptions(
  index: 0,
  name: "No",
),
];

Answer 1

您需要借助ListView.builder使用颤动的“水平”列表视图，并为水平滚动设置scrollDirection: Axis.horizontal，对于复选框，我们需要使用RadioListTile具有文本功能的单选按钮。请检查我的以下代码。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutterlearningapp/colors.dart';

class HomeScreen extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _HomeScreen();
  }
}

class _HomeScreen extends State<HomeScreen> {
  List<String> selectedList = new List<String>();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    selectedList.add("");
    selectedList.add("");
    selectedList.add("");
    selectedList.add("");
    selectedList.add("");
    selectedList.add("");
    selectedList.add("");
    selectedList.add("");

  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    return Scaffold(
      appBar: AppBar(
        title: Text("Home"),
      ),
      body: Container(
        padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 24.0),
        height: MediaQuery.of(context).size.height * 0.29,
        child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: selectedList.length,
            itemBuilder: (context, index) {
              return Row(
                children: <Widget>[
                  Container(
                    width: MediaQuery.of(context).size.width * 0.4,
                    color: Colors.greenAccent,
                    child: Column(
                      children: <Widget>[
                        SizedBox(
                          height: 10.0,
                        ),
                        Container(
                          margin: EdgeInsets.only(left: 10.0),
                          child:Align(

                            alignment: Alignment.topLeft,
                            child: Text("Question ${index}"),
                          ) ,
                        )
                        ,
                        RadioListTile(
                          groupValue: selectedList[index]==""?0:
                          selectedList[index]=="0"?false:true,
                          title: Text('Yes'),
                          value: true,
                          onChanged: (val) {
                            setState(() {
                              selectedList[index] = "1";

                            });

                          },
                        ),
                        RadioListTile(
                          groupValue: selectedList[index]==""?0:
                          selectedList[index]=="0"?false:true,
                          title: Text('No'),
                          value: false,
                          onChanged: (val) {
                            setState(() {
                              selectedList[index] = "0";
                            });

                          },
                        ),
                      ],
                    ),
                  ),
                  SizedBox(
                    width: 10.0,
                  )
                ],
              );
            }),
      ),
    );
  }

    checkValue(int index, var selectedVale) {
    setState(() {
      if (selectedList[index] == "1") {
        selectedList[index] = "1";
      }
      else  if (selectedList[index] == "2") {
        selectedList[index] = "2";

      }
      else{
        selectedList[index] = "0";

      }
    });

  }
}

从上面的代码输出将是

Flutter：-ListTile不显示单选按钮

1 个答案: