多行文本组件颤动

如何解决多行文本组件颤动

我创建了一个可重复使用的多行文本组件。我正在使用 TextSpan 小部件。

代码：

/// Creates multi line styled widget which displays list of items with bullet
class AppMultiLineText extends StatelessWidget {
  final List<CustomStyledText> items;
  final String semanticsText;

  const AppMultiLineText({@required this.items,this.semanticsText}) : assert(items != null);

  @override
  Widget build(BuildContext context) {
    final style = context.appThemeData.bodycopyDefault.appTextStyle;
    final styleBold = context.appThemeData.bodycopyBold.appTextStyle;
    return MergeSemantics(
      child: Padding(
        padding: context.appThemeData.multilinedisplay.padding,child: Column(
          children: [
            _buildrow(context,items,style,styleBold,semanticsText),],),);
  }
}

Widget _buildrow(BuildContext context,List<CustomStyledText> styledText,AppTextStyle style,AppTextStyle styleBold,String semanticsText) {
  final _padding = EdgeInsets.symmetric(vertical: context.appThemeData.bulletStyle.spaceBetweenLines);
  return Semantics(
    child: Padding(
      padding: _padding,child: Row(
        children: [
          _buildBulletSection(context),_styledWidget(context,styledText,);
}

Widget _buildBulletSection(BuildContext context) {
  // final textScaleFactor = _textScaleFactor(context);
  final _bulletPadding = EdgeInsets.only(
      top: context.appThemeData.bulletStyle.bulletoffset,right: context.appThemeData.bulletStyle.spaceAfterBullet);

  return Text.rich(
    TextSpan(
      children: [
        WidgetSpan(
          child: Padding(
            padding: _bulletPadding,child: _drawBullet(context),//textScaleFactor: textScaleFactor,);
}

Widget _drawBullet(BuildContext context) {
  final _bulletDiameter = context.appThemeData.bulletStyle.bulletDiameter;
  return Container(
    width: _bulletDiameter,height: _bulletDiameter,decoration: Boxdecoration(
      color: context.appThemeData.bodycopyDefault.appTextStyle.textStyle.color,shape: BoxShape.circle,);
}
Widget _styledWidget(BuildContext context,String semanticsText) {
  final scaleFactor = context.calculateScaleFactor(
    style.textStyle.fontSize,style.maximumFontSize,style.minimumScalingFactor,);

  return Expanded(
    child: Text.rich(
      TextSpan(
        style: style.textStyle,children: styledText.map((e) {
          return TextSpan(
            text: e.text,style: e.isBold
                ? styleBold.textStyle.copyWith(
                    letterSpacing: e.isNumeric ? PresentationConstants.numericLetterSpacing : null,)
                : style.textStyle.copyWith(
                    letterSpacing: e.isNumeric ? PresentationConstants.numericLetterSpacing : null,);
        }).toList(),style: style.textStyle,textScaleFactor: scaleFactor,textAlign: style.textAlign,semanticslabel: semanticsText,);
}

class CustomStyledText {
  final String text;
  final String styleText;
  final bool isBold;
  final bool isNumeric;

  CustomStyledText(
    this.text,{
    this.styleText,this.isBold = false,this.isNumeric = false,});
}


class:
 AppMultiLineText(
              items: [
                CustomStyledText(context.appLocalization.listofRequirementsBodycopy1),CustomStyledText(context.appLocalization.listofRequirementsBodycopy2),

[![在此处输入图片描述][1]][1]

这是预期的设计 [1]：https://i.stack.imgur.com/AZF3w.png

但我将所有项目都作为段落。

解决方法

最好使用 RichText 小部件。详情请见here

,

我可以提出另一个解决方案吗？

import 'package:flutter/material.dart';

class CustomList extends StatelessWidget {
  final List<Widget> children;

  const CustomList({
    Key key,this.children = const [],}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        for (final child in children)
          Container(
            padding: EdgeInsets.all(10.0),child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,children: [
                Padding(
                  padding: const EdgeInsets.all(5.0),child: Icon(
                    Icons.circle,size: 4.0,),SizedBox(width: 10.0),Expanded(child: child),],);
  }
}

将您喜欢的任何小部件传递给它的子部件，它会自动附加点：

CustomList(
            children: [
              Text('My first line of text'),Text(
                'My second line of text which is long enough,long enough,long enough',style: TextStyle(
                  fontWeight: FontWeight.bold,color: Colors.orange,fontSize: 20.0,

-----------插件 -----------

您可以更进一步，添加“类型”以从无序样式切换到有序样式。

import 'package:flutter/material.dart';

enum CustomListType { Unordered,Ordered }

class CustomList extends StatelessWidget {
  final List<Widget> children;
  final CustomListType type;

  const CustomList({
    Key key,this.type = CustomListType.Unordered,}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final _children = <Widget>[];
    for (var i = 0; i < children.length; i++) {
      _children.add(Container(
        padding: EdgeInsets.all(10.0),child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,children: [
            type == CustomListType.Ordered
                ? Text('${i + 1}.')
                : Padding(
                    padding: const EdgeInsets.all(5.0),child: Icon(
                      Icons.circle,Expanded(child: children.elementAt(i)),));
    }
    return Column(
      children: _children,);
  }
}

CustomList(
            type: CustomListType.Ordered,children: [
              Text('My first line of text'),