Flutter list of Text：如何修复所有列表项的样式

Posted 2023-02-23

【中文标题】Flutter list of Text：如何修复所有列表项的样式

【英文标题】：Flutter list of Text: How to fix the style of all list items

【发布时间】：2020-12-25 08:27:50

【问题描述】：

我对 Flutter 和面向对象的一般概念并不陌生。我正在构建一个与 CupertinoPicker 一起使用的文本列表，我想对所有列表项使用相同的样式，但我不想重复这些行并且每次都指定 text style。 比如下面的汽车manufacturers列表：

import 'package:flutter/material.dart';

TextStyle kStyle = TextStyle(color: Colors.white, fontWeight: FontWeight.w900);

List<Text> manufacturers = [
    Text('Toyota', style: kStyle,),
    Text('VolksWagen', style: kStyle,),
    Text('Nissan', style: kStyle,),
    Text('Renault', style: kStyle,),
    Text('Mercedes', style: kStyle,),
    Text('BMW', style: kStyle,)
  ];

您看到manufacturers 列表中的列表项可以随着更多汽车而变得如此之长，我可以使用一个类来告诉颤振我的样式对于所有项都固定为kstyle，而无需为每个项显式写入style: kstyle单行？

【问题讨论】：

这能回答你的问题吗？ Iterating through a list to render multiple widgets in Flutter?

【参考方案1】：

基本上我们可以使用DefaultTextStyle小部件

最终结果

CupertinoPicker 小部件

通用列小部件

1。问题是我们需要使用 CupertinoPicker

在库中，它被定义为

    final Widget result = DefaultTextStyle(
      style: CupertinoTheme.of(context).textTheme.pickerTextStyle,
        child: Stack(

2。解决方案：覆盖主题

因此，我们需要在应用的最开始定义它的样式

const TextStyle kStyle = TextStyle(
  color: Colors.blue,
  fontWeight: FontWeight.w900,
);

class FlutterApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Cupertino Picker',
      home: ListViewScreen(),
      theme: ThemeData(
        cupertinoOverrideTheme: CupertinoThemeData( // <---------- this
          textTheme: CupertinoTextThemeData(
            pickerTextStyle: kStyle,
          ),
        ),
      ),
    );
  

A.完整的工作代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() 
  runApp(FlutterApp());


const TextStyle kStyle = TextStyle(
  color: Colors.blue,
  fontWeight: FontWeight.w900,
);

class FlutterApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Cupertino Picker',
      home: ListViewScreen(),
      theme: ThemeData(
        cupertinoOverrideTheme: CupertinoThemeData( // <---------- this
          textTheme: CupertinoTextThemeData(
            pickerTextStyle: kStyle,
          ),
        ),
      ),
    );
  


class ListViewScreen extends StatelessWidget 
  final List<Text> manufacturers = [
    Text('Toyota'),
    Text('VolksWagen'),
    Text('Nissan'),
    Text('Renault'),
    Text('Mercedes'),
    Text('BMW')
  ];
  @override
  Widget build(BuildContext context) 
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text("Select Car"),
      ),
      child: Container(
        height: 200,
        child: CupertinoPicker(
          itemExtent: 50,
          onSelectedItemChanged: (int index) 
            print(index);
          ,
          children: manufacturers,
        ),
      ),
    );
  

B. [可选] 默认文本样式的简单使用

List<Text> manufacturers = [
  Text('Toyota'),
  Text('VolksWagen'),
  Text('Nissan'),
  Text('Renault'),
  Text('Mercedes'),
  Text('BMW')
];

const TextStyle kStyle = TextStyle(
  color: Colors.white,
  fontWeight: FontWeight.w900,
);

class CarList extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return DefaultTextStyle(
      style: kStyle,
      child: Column(
        children: manufacturers,
      ),
    );
  

【参考方案2】：

您可以为所有 Text 小部件创建一种方法：

Text styledText(String text) => Text(text, style: TextStyle(color: Colors.white, fontWeight: FontWeight.w900));

并在您的列表中使用它：

    List<Text> manufacturers = [
    styledText('Toyota'),
    styledText('VolksWagen'),
    styledText('Nissan'),
    styledText('Renault'),
    styledText('Mercedes'),
    styledText('BMW')
  ];

你也可以创建一个字符串列表

    List<String> manufacturers = [
    'Toyota',
    'VolksWagen',
    'Nissan',
    'Renault', 
    'Mercedes', 
    'BMW',
  ];

并在遍历列表时使用 tis 方法。

或者你可以创建一个类而不是方法：

class CustomStyledText extends StatelessWidget 
  final String text;

  const CustomStyledText(this.text, Key key) : super(key: key);
  
 
  TextStyle get _style => TextStyle(color: Colors.white, fontWeight: FontWeight.w900);

  @override
  Widget build(BuildContext context) => Text(text, style: _style);
  

【参考方案3】：

您可以在Text 小部件上创建一个extension 并使用它：

创建extension:

// extension 
extension on Text 
  // method to apply style
  applyStyle(TextStyle textStyle) 
    return Text(
      this.data,
      style: textStyle,
    );
  

在Text 小部件上使用extension 方法：

   return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ...List.generate(
            manufacturers.length,
            // call the applyStyle method on the Text widget
            (index) => manufacturers[index].applyStyle(kStyle),
          ).toList(),
        ],
      ),
    );

【参考方案4】：

您可以创建一个新的小部件：

class MyTextWidget extends StatelessWidget 
  final String text;

  const MyTextWidget(Key key, this.text) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return Text(text,style: TextStyle(color: Colors.white, fontWeight: FontWeight.w900),);
  

并在您的列表中使用它

List<Text> manufacturers = [
    MyTextWidget('Toyota'),
    MyTextWidget('VolksWagen'),
    MyTextWidget('Nissan'),
    MyTextWidget('Renault'),
    MyTextWidget('Mercedes'),
    MyTextWidget('BMW')
  ];

如果你想改变所有应用程序中的字体，你必须像这样从MaterialApp改变它：

@override
  Widget build(BuildContext context) 
     return MaterialApp(
          theme: ThemeData(
               textTheme: TextTheme(
                //Use the appropriate TextStyle
               ),
            ),);