我需要实现类似 this 的设计.我已经尝试过 Grid 和 ListViews,但我无法实现这种设计。主要目标是在给定设计中显示字符串列表。
最佳答案
试试这个模板代码
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),
);
}
}
关于listview - 如何在 flutter 中实现如下设计?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57688266/