簡體   English   中英

Flutter ListTile with Radio Button 3 in one row

[英]Flutter ListTile with Radio Button 3 in one row

我正在嘗試使用 Radio Button ad ListTile 在 flutter 中連續添加 3 個帶有標題的單選按鈕,但每個單選按鈕的標題都溢出並且出現在兩行中。 我怎樣才能讓它出現在一行中?

這是圖片

在此處輸入圖像描述

這是我用來顯示 3 個圖塊的代碼。

             Padding(
                        padding: EdgeInsets.only(left: 5, right: 5),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text("Gender",
                              style: TextStyle(fontSize: 19),),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Expanded(
                                  child:ListTile(
                                    title: const Text('Female'),
                                    leading: Radio(
                                      fillColor: MaterialStateColor.resolveWith((states) => Color(0XFFB63728)),
                                      value: Gender.female,
                                      groupValue: _gen,
                                      onChanged: (Gender? value) {
                                        setState(() {
                                          _gen = value;
                                        });
                                      },
                                    ),
                                  ),
                                ),
                                Expanded(
                                  child: ListTile(

                                    title: const Text('Male'),
                                    leading: Radio(
                                      fillColor: MaterialStateColor.resolveWith((states) => Color(0XFFB63728)),
                                      value: Gender.male,
                                      groupValue: _gen,
                                      onChanged: (Gender? value) {
                                        setState(() {
                                          _gen = value;
                                        });
                                      },
                                    ),
                                  ),),
                                Expanded(
                                  child:ListTile(
                                    title: const Text('Other'),
                                    leading: Radio(
                                      fillColor: MaterialStateColor.resolveWith((states) => Color(0XFFB63728)),
                                      value: Gender.other,
                                      groupValue: _gen,
                                      onChanged: (Gender? value) {
                                        setState(() {
                                          _gen = value;
                                        });
                                      },
                                    ),
                                  ),
                                ),

                              ],
                            )

ListTile添加contentPadding屬性:

ListTile(
       contentPadding: EdgeInsets.all(0)
)

contentPadding set 0刪除leadingtitle之間的額外空間。

更多信息: https://api.flutter.dev/flutter/material/ListTile/contentPadding.html

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM