在 Flutter 專案的串列視圖中，我需要顯示專案，即存盤在List變數中的文本片段。每個專案（即一段文本）都有圓形邊框，但每個專案的長度會根據文本中的字符數而有所不同。在點擊每個串列項，即一段文本時，會發生一些動作。
以下是顯示輸出應如何的影像：
目前，每個串列項都占用水平可用空間的最大大小，并且文本在中間對齊。但我希望每個串列項的背景只包含一段文本，而不是水平的全尺寸，然后文本應該位于背景的中間。當前結果如下圖所示。
代碼：
final List<String> names = <String>['Topic 1', 'Topic 2 ', 'Topic 3', 'Topic 4', 'Topic 5'];
ListView.builder(
shrinkWrap: true,
padding: const EdgeInsets.all(8),
itemCount: names.length,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 50,
margin: EdgeInsets.all(2),
// color: msgCount[index]>=10? Colors.blue[400] msgCount[index]>3? Colors.blue[100]: Colors.grey,
child: Container(
child: Padding(
padding:EdgeInsets.fromLTRB(3, 0,0,0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children:[
Expanded(
child: TextButton(
onPressed: () {
print("Do something!");
},
style: ButtonStyle(
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
minimumSize:MaterialStateProperty.all(Size(double.infinity, 14)),
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(40.0)),
),
backgroundColor:
MaterialStateProperty.all(
Colors.white
)),
child:Text('${names[index]} ',
style: TextStyle(fontSize: 18),
textAlign: TextAlign.left,
),
),
),
]
),
),
),
);
}
)
如何使串列項與第一個螢屏截圖中的一樣？
編輯： 上面的串列視圖在下面的代碼中，即下面的代碼應該附加到上面的代碼中，并且應該加上必要的括號。
SingleChildScrollView(
// child: Container(
// padding: const EdgeInsets.only(top: 80, left: 24, right: 24),
child:Container(
height: MediaQuery.of(context).size.height, // or something simular :)
child: Column(
children: [
Text('Select a Topich000'),
EDIT2： 我正在從下面的應用程式中粘貼完整的代碼（即不僅串列視圖相關的代碼，因為串列視圖在其他代碼片段中）。因此，當您發布答案時，請確保使用以下我的完整代碼格式：
final List<String> names = <String>['Topic 1', 'Topic 2 ', 'Topic 3', 'Topic 4', 'Topic 5'];
return Scaffold(
appBar: AppBar(
systemOverlayStyle: SystemUiOverlayStyle.light,
title: const Text('Topics'),
),
body: SingleChildScrollView(
child:Container(
height: MediaQuery.of(context).size.height, // or something simular :)
child: Column(
children: [
Text('Select a Topic'),
Expanded(
child: ListView.builder(
shrinkWrap: true,
padding: const EdgeInsets.all(8),
itemCount: names.length,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 50,
margin: EdgeInsets.all(2),
child: Container(
child: Padding(
padding:EdgeInsets.fromLTRB(3, 0,0,0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children:[
Expanded(
child: TextButton(
onPressed: () {
print("Do something !");
Navigator.of(context).pushNamed("/subtopicScreen", arguments: {'index_found': index 1,
'uploadable_image_path':uploadable_image_path });
},
// );
style: ButtonStyle(
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
minimumSize:MaterialStateProperty.all(Size(double.infinity, 14)),
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(40.0)),
),
backgroundColor:
MaterialStateProperty.all(
//Colors.green[900]
Colors.white
)),
child:Text('${names[index]} ',
style: TextStyle(fontSize: 18),
textAlign: TextAlign.left,
),
),
),
]
),
),
),
);
}
)
)
],
),
),
// ),
),
bottomNavigationBar: BottomAppBar(
child: Container(
height: 35.0,
width: double.maxFinite,
/*decoration: BoxDecoration(
color: Colors.deepOrange,
borderRadius: BorderRadius.vertical(top: Radius.circular(20.0))
),*/
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
//IconButton(icon: Icon(Icons.chat), onPressed: (){ },),
InkWell(
onTap: () {
//Navigator.pushNamed(context, "YourRoute");
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => topicScreen(),
),
);
},
child: TextButton(
child: Padding(
padding: const EdgeInsets.only(left: 10.0, right: 10.0),
child: Text('..',
style: TextStyle(
color: Colors.white,
// backgroundColor: Colors.blue,
fontSize: 14,
fontWeight: FontWeight.w500)),
),
style: TextButton.styleFrom(
primary: Colors.teal,
backgroundColor: Colors.blue,
onSurface: Colors.yellow,
side: BorderSide(color: Colors.teal, width: 2),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(25))),
),
onPressed: () {
print('Pressed');
},
),
),
],
),
),
),
);
}
uj5u.com熱心網友回復：
嘗試洗掉 Expanded 小部件并minimumSize:MaterialStateProperty.all(Size(double.infinity, 14))從您的 TextButton 小部件中洗掉。
代碼：
ListView.builder(
shrinkWrap: true,
padding: const EdgeInsets.all(8),
itemCount: names.length,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 50,
margin: EdgeInsets.all(2),
// color: msgCount[index]>=10? Colors.blue[400] msgCount[index]>3? Colors.blue[100]: Colors.grey,
child: Container(
child: Padding(
padding: EdgeInsets.fromLTRB(3, 0, 0, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
TextButton(
onPressed: () {
print("Do something!");
},
style: ButtonStyle(
tapTargetSize:
MaterialTapTargetSize.shrinkWrap,
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(40.0)),
),
backgroundColor: MaterialStateProperty.all(
Colors.white)),
child: Text(
'${names[index]} ',
style: TextStyle(fontSize: 18),
textAlign: TextAlign.left,
),
),
]),
),
),
);
})
uj5u.com熱心網友回復：
嘗試下面的代碼并使用
uj5u.com熱心網友回復：
您應該嘗試在小部件的builder方法中給ListView.builder小部件一個高度，特別是給您的Container.
itemBuilder: (BuildContext context, int index) {
return Container(
height: 50,
width: <your width here> <<<<<------
編輯：作業代碼。
final names = <String>[
'Topic 1',
'Topic 2 ',
'Topic 3',
'Topic 4',
'Topic 5'
];
return Scaffold(
appBar: AppBar(
systemOverlayStyle: SystemUiOverlayStyle.light,
title: const Text('Topics'),
),
body: SingleChildScrollView(
child: SizedBox(
height: MediaQuery.of(context).size.height, // or something simular :)
child: Column(
children: [
const Text('Select a Topic'),
Expanded(
child: ListView.builder(
shrinkWrap: true,
padding: const EdgeInsets.all(8),
itemCount: names.length,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 50,
width: 100,
margin: const EdgeInsets.all(2),
padding: const EdgeInsets.fromLTRB(3, 0, 0, 0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
TextButton(
onPressed: () {
print("Do something !");
// Navigator.of(context).pushNamed("/subtopicScreen", arguments: {'index_found': index 1,
// 'uploadable_image_path':uploadable_image_path });
},
// );
style: ButtonStyle(
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
minimumSize: MaterialStateProperty.all(
const Size.fromWidth(100),
),
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
40,
),
),
),
backgroundColor: MaterialStateProperty.all(
//Colors.green[900]
Colors.white,
),
),
child: Text(
'${names[index]} ',
style: const TextStyle(fontSize: 18),
textAlign: TextAlign.left,
),
),
],
),
);
},
),
)
],
),
),
// ),
),
bottomNavigationBar: BottomAppBar(
child: Container(
height: 35.0,
width: double.maxFinite,
/*decoration: BoxDecoration(
color: Colors.deepOrange,
borderRadius: BorderRadius.vertical(top: Radius.circular(20.0))
),*/
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
//IconButton(icon: Icon(Icons.chat), onPressed: (){ },),
InkWell(
onTap: () {
//Navigator.pushNamed(context, "YourRoute");
},
child: TextButton(
child: Padding(
padding: const EdgeInsets.only(left: 10.0, right: 10.0),
child: Text('..',
style: TextStyle(
color: Colors.white,
// backgroundColor: Colors.blue,
fontSize: 14,
fontWeight: FontWeight.w500)),
),
style: TextButton.styleFrom(
primary: Colors.teal,
backgroundColor: Colors.blue,
onSurface: Colors.yellow,
side: BorderSide(color: Colors.teal, width: 2),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(25))),
),
onPressed: () {
print('Pressed');
},
),
),
],
),
),
),
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/478161.html
上一篇：單擊按鈕顫動后顯示串列圖塊