Flutter使用VerticalDivider并解决Row中不显示问题-开发者社区-阿里云

Flutter 中如何添加垂直分隔线【Flutter 专题 18】

2022-01-10 980

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 今天有粉丝在群里问我 Flutter 中如何添加垂直分隔线当然是通过使用 VerticalDivider 小部件，我们可以就可以在小部件之间添加垂直分隔线。先来看效果

今天有粉丝在群里问我 Flutter 中如何添加垂直分隔线

当然是通过使用 VerticalDivider 小部件，我们可以就可以在小部件之间添加垂直分隔线。

先来看效果

完整代码

import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  static const String _title = 'Flutter VerticalDivider Sample';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatelessWidget(),
      ),
    );
  }
}
/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(10),
      child: Row(
        children: <Widget>[
          Expanded(
            child: Container(
              alignment: Alignment.center,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                color: Colors.blue,
              ),
              child: Text(
                "坚果",
                style: TextStyle(fontSize: 23),
              ),
            ),
          ),
          const VerticalDivider(
            color: Colors.grey,
            thickness: 1,
            indent: 20,
            endIndent: 0,
            width: 20,
          ),
          Expanded(
            child: Container(
              alignment: Alignment.center,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                color: Colors.orange,
              ),
              child: Text(
                "前端",
                style: TextStyle(fontSize: 23),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

构造函数

VerticalDivider({
  Key? key,
  this.width,
  this.thickness,
  this.indent,
  this.endIndent,
  this.color,
})

特性：

color : 设置分隔线颜色
thickness: 设置分隔线的厚度
indent : 设置分隔符顶部的空间
endIndent :设置分隔线底部的空间

当我们在行小部件中添加 verticaldivider 时，它不会显示。我们可以通过以下方式克服不显示 verticaldivider 的问题

在 IntrinsicHeight 小部件中添加您的行小部件
在具有所需高度的 SizedBox 小部件中添加 VerticalDivider

其他使用 IntrinsicHeight 的示例

IntrinsicHeight(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
    Icon(Icons.menu,color: AppColors.technoBlack,),
    SizedBox(width: 5.w,),
    Expanded(child: TextField(
    style: TextStyle(fontSize: 16.sp,color: AppColors.technoBlack,fontWeight: FontWeight.w300),
      decoration: InputDecoration(
      hintText: "Your Current Location",
      focusedBorder: InputBorder.none,
    ),)),
      SizedBox(width: 5.w,),
    VerticalDivider(color: AppColors.technoBlack,thickness: 2),
      SizedBox(width: 5.w,),
    Icon(Icons.filter_tilt_shift,color: AppColors.technoBlack,),
  ],),
),

使用 VerticalDivider 的示例

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
  Icon(Icons.menu,color: AppColors.technoBlack,),
  SizedBox(width: 5.w,),
  Expanded(child: TextField(
  style: TextStyle(fontSize: 16.sp,color: AppColors.technoBlack,fontWeight: FontWeight.w300),
    decoration: InputDecoration(
    hintText: "Your Current Location",
    focusedBorder: InputBorder.none,
  ),)),
    SizedBox(width: 5.w,),
  SizedBox(child: VerticalDivider(color: AppColors.technoBlack,thickness: 2,),height: 30,),
    SizedBox(width: 5.w,),
  Icon(Icons.filter_tilt_shift,color: AppColors.technoBlack,),
],),