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

Question

我对颤振和面向对象的一般概念很陌生。我正在构建一个与 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

标签： listflutterobject

Answer 1

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

最后结果

1. CupertinoPicker 小部件

2. 通用列小部件

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