Listview 如何在颤振中实现如下设计?
我需要实现这样的设计。我尝试过网格和列表视图,但我无法实现这种设计。主要目标是显示给定设计中的字符串列表。尝试此模板代码Listview 如何在颤振中实现如下设计?,listview,flutter,dart,flutter-layout,Listview,Flutter,Dart,Flutter Layout,我需要实现这样的设计。我尝试过网格和列表视图,但我无法实现这种设计。主要目标是显示给定设计中的字符串列表。尝试此模板代码 import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState()
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
darkTheme: ThemeData.dark(),
title: 'Widget of the weeks',
home: Scaffold(
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(10.0, 10.0, 5, 0),
child: Text("FILTER",
style: TextStyle(
color: Colors.white30, fontWeight: FontWeight.bold)),
),
Container(
constraints: BoxConstraints(minHeight: 100, maxHeight: 100),
child: SingleChildScrollView(
child: Wrap(
crossAxisAlignment: WrapCrossAlignment.center,
verticalDirection: VerticalDirection.down,
runSpacing: 3.0,
spacing: 3.0,
children: <Widget>[
ChipDesign("Lifetime"),
ChipDesign("Student"),
ChipDesign("Salaried"),
ChipDesign("Corporate"),
ChipDesign("Open1"),
ChipDesign("Open2"),
ChipDesign("Open2"),
ChipDesign("Open4"),
ChipDesign("Open5"),
ChipDesign("Open6"),
ChipDesign("Open7"),
ChipDesign("Open9"),
ChipDesign("Open10"),
ChipDesign("Open11"),
ChipDesign("Open12"),
ChipDesign("My Referral Code Users"),
ChipDesign("+10"),
],
),
),
),
],
),
),
),
);
}
}
class ChipDesign extends StatelessWidget{
final String _label;
ChipDesign(this._label);
@override
Widget build(BuildContext context){
return Container(
child: Chip(
label: Text(
_label,
style: TextStyle(color: Colors.white),
),
backgroundColor: Colors.red,
padding: EdgeInsets.fromLTRB(5.0, 0.0, 5.0, 0.0),
),
margin: EdgeInsets.only(left: 10, right: 3, top: 0, bottom: 0),
);
}
}
您可以使用将小部件列表作为子部件的Wrap小部件,在本例中,它将是一个包含文本的容器。所有不适合该行的小部件都将移动到下一行。也可以设置垂直和水平间距
class GridWidget extends StatefulWidget {
@override
_GridWidgetState createState() => _GridWidgetState();
}
class _GridWidgetState extends State<GridWidget> {
List<String> text = ['Android', 'IOS', 'Flutter', 'IOT', 'Text', 'Text', 'Text'];
List<Widget> widgets;
@override
void initState() {
widgets = List.generate(text.length, (index)=>Container(
width: (text[index].length * 16).toDouble(),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(15)),
border: Border.all(
color: Colors.black54,
width: 2,
)
),
child: Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: Text(text[index], textAlign: TextAlign.center,),
),
),
),
), growable: false);
super.initState();
}
@override
Widget build(BuildContext context) {
return Center(
child: Wrap(
runSpacing: 10,
spacing: 10,
direction: Axis.horizontal,
children: widgets,
),
);
}
}
虽然在本例中,我硬编码了容器宽度。在大多数情况下,它应该只是包裹在填充物周围。需要一些思考,但我希望您能理解,尝试运行此功能。谢谢,这正是我需要的。