如何解决Flutter:如何在Flutter中的其他小部件之间创建漂亮的Curve椭圆形容器/分隔线
如何在Flutter应用中创建漂亮的曲线形状分隔线。
解决方法
只需将此customDivider用作分隔线
customDivider(String title) {
return Row(
children: [
Expanded(
child: Container(
color: Colors.white,height: 10,),Container(
padding: EdgeInsets.all(10),decoration: BoxDecoration(
borderRadius: BorderRadius.circular(13),color: Colors.white,child: Center(child: Text(title)),Expanded(
child: Container(
color: Colors.white,],);
}
这是一个例子
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',theme: ThemeData(
primarySwatch: Colors.blue,visualDensity: VisualDensity.adaptivePlatformDensity,home: MyHomePage(title: 'Flutter Demo Home Page'),);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key,this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey,appBar: AppBar(
title: Text(widget.title),body: ListView.builder(
itemCount: 5,shrinkWrap: true,itemBuilder: (context,index) => listItem(index),);
}
customDivider(String title) {
return Row(
children: [
Expanded(
child: Container(
color: Colors.white,);
}
listItem(int index) {
return Column(
children: [
Container(
height: 200,width: 200,margin: EdgeInsets.all(10),color: index.isEven ? Colors.orange : Colors.deepPurpleAccent,customDivider("your title"),);
}
}
输出:
,它使用Stack类
链接网址:https://api.flutter.dev/flutter/widgets/Stack-class.html
伪代码
Stack {
Container(),// background
Contanier(),// white Line
Text(),// center Text
}
,
可以有多种方法来实现此目的。这是最简单的方法之一。
main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: SafeArea(
child: SO(),);
}
}
class SO extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.pink.shade100,appBar: AppBar(),body: Center(
child: CapsuleWidget(
label: 'organizing data'.toUpperCase(),ribbonHeight: 8,);
}
}
class CapsuleWidget extends StatelessWidget {
final Color fillColor;
final Color textColor;
final String label;
final double ribbonHeight;
final double ribbonRadius;
const CapsuleWidget({
Key key,this.fillColor = Colors.white,this.textColor = Colors.black,@required this.label,@required this.ribbonHeight,this.ribbonRadius = 1000,}) : super(key: key);
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Expanded(
child: Container(
height: ribbonHeight,color: fillColor,Container(
decoration: BoxDecoration(color: fillColor,borderRadius: BorderRadius.circular(ribbonRadius)),child: Padding(
padding: const EdgeInsets.all(12.0),child: Text(
label,style: TextStyle(color: textColor,fontWeight: FontWeight.w500),Expanded(
child: Container(
height: ribbonHeight,);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。