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,);
  }
}