单选按钮和 ListView - Flutter

Question

我有一长串使用 RadioListTile 的单选按钮。问题是列表很长，溢出到页面底部，因此我需要找到一种向下滚动的方法。我试过用 ListView 实现 RadioListTile 但没有成功！任何人都知道如何解决这个问题？谢谢！

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  static const values = <String>[
    '1',
    '2',
    '3',
    '4',
    '5',
    '6',
    '7',
    '8',
    '9',
    '10',
    '11',
    '12',
    '13',
    '14',
  ];
  String selectedValue = values.first;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Column(
          children: [
            Divider(color: Colors.white),
            Material(child: buildRadios()),
            Divider(color: Colors.white),
          ],
        ),
      ),
    );
  }

  Widget buildRadios() => Column(
        children: values.map(
          (value) {
            return RadioListTile<String>(
              value: value,
              groupValue: selectedValue,
              title: Text(value),
              onChanged: (value) => setState(() => this.selectedValue = value!),
            );
          },
        ).toList(),
      );
}

Answer 1

您可以将 RadioListTile 包装在滚动条小部件中。

Answer 2

用 Expanded 小部件包裹 buildRadios()

Answer 3

试试下面的代码，然后包装你的 Column inside SingleChildScrollView

 SingleChildScrollView(
      child: Column(
        children: [
          Divider(color: Colors.white),
          Material(child: buildRadios()),
          Divider(color: Colors.white),
        ],
      ),
    ),

结果屏幕 ->

单选按钮和 ListView - Flutter

Radio Buttons and ListView - Flutter

dart

flutter

flutter-listview